html - CSS: Issue with the third inline-block element -

below can see code has 3 lines of inline-block elements. these lines absolutely same. behavior of third line strange. see @ code snippet. what's wrong third line? why displayed weird?

thank you.

.partners {    width: 940px;    text-align: center;    margin: 95px auto 0 auto;  }  .partners__h2 {    color: #333;    font-weight: bold;    font-size: 22px;    text-align: center;    margin-bottom: 32px;  }  .wrap {    background: #a1a1a1;  }  .partners li {    display: inline-block;    vertical-align: text-top;  }  .partner__wrap {    bottom: 0;    width: 100%;    text-align: center;  }  .partner__name {    display: block;    float: left;    width: 100%;    font-weight: bold;    color: #333;    font-size: 14px;    margin-bottom: 0px;  }  .partner__description {    font-family: roboto;    font-weight: 300;    color: #666;    font-size: 14px;    text-align: center;    float: left;    margin-top: 10px;  }  .partner__1 {    width: 220px;    height: 100%;    float: left;  }  .partner__2 {    width: 220px;    height: 100%;    margin-right: 16px;  }  .partner__3 {    width: 220px;    height: 100%;  }  .partner__4 {    width: 220px;    height: 100%;    float: right;  }  .partner__5 {    float: left;    height: 100%;    width: 220px;  }  .partner__6 {    height: 100%;    margin-right: 16px;    width: 220px;  }  .partner__7 {    height: 100%;    width: 220px;  }  .partner__8 {    width: 220px;    height: 100%;    float: right;  }  .partner__9 {    float: left;    width: 220px;    height: 100%;  }  .partner__10 {    width: 220px;    height: 100%;    margin-right: 16px;  }  .partner__11 {    width: 220px;    height: 100%;  }  .partner__12 {    float: right;    width: 220px;    height: 100%;  }  .partner {    background: #ddd;    vertical-align: top;    display: inline-block;  }

<div class="partners">    <div class="partners__container">      <div class="wrap">        <div class="partner__1 partner">          <div class="partner__wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__2 partner">            <div class="partner__wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__3 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">i inspiration nature , objects around me. have passion colours, typography , skateboards.</p>          </div>        </div>        <div class="partner__4 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>          <div class="partner__5 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__6 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__7 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__8 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>          <div class="partner__9 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__10 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__11 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__12 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>      </div>      </div>  </div>

if use float , 4 items per row, you'll need clear float on first item of each row (if items have different heights).

.partners {    width: 940px;    text-align: center;    margin: 95px auto 0 auto;  }  .partners__h2 {    color: #333;    font-weight: bold;    font-size: 22px;    text-align: center;    margin-bottom: 32px;  }  .wrap {    background: #a1a1a1;    overflow: hidden;  }  .partner__wrap {    bottom: 0;    width: 100%;    text-align: center;  }  .partner__name {    display: block;    float: left;    width: 100%;    font-weight: bold;    color: #333;    font-size: 14px;    margin-bottom: 0px;  }  .partner__description {    font-family: roboto;    font-weight: 300;    color: #666;    font-size: 14px;    text-align: center;    float: left;    margin-top: 10px;  }  .partner {    width: 220px;    height: 100%;    margin: 0 7.5px 20px;    background: #ddd;    /* vertical-align: top; */    /* display: inline-block; */    float: left;  }  .partner:nth-child(4n+1) {      clear: both;  }

<div class="partners">    <div class="partners__container">      <div class="wrap">        <div class="partner__1 partner">          <div class="partner__wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__2 partner">            <div class="partner__wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__3 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">i inspiration nature , objects around me. have passion colours, typography , skateboards.</p>          </div>        </div>        <div class="partner__4 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>          <div class="partner__5 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__6 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__7 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__8 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>          <div class="partner__9 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__10 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__11 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__12 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>      </div>      </div>  </div>

if use inline-block, you'll fine. should not use float + inline-block, don't work well.

my suggestion, stick 1 of them, i'd vote inline-block. , parter__* classes can merged 1 think. point worth mention - how remove space between inline-block elements?

.partners {    width: 940px;    text-align: center;    margin: 95px auto 0 auto;  }  .partners__h2 {    color: #333;    font-weight: bold;    font-size: 22px;    text-align: center;    margin-bottom: 32px;  }  .wrap {    background: #a1a1a1;  }  .partner__wrap {    bottom: 0;    width: 100%;    text-align: center;  }  .partner__name {    display: block;    float: left;    width: 100%;    font-weight: bold;    color: #333;    font-size: 14px;    margin-bottom: 0px;  }  .partner__description {    font-family: roboto;    font-weight: 300;    color: #666;    font-size: 14px;    text-align: center;    float: left;    margin-top: 10px;  }  .partner {    width: 220px;    height: 100%;    margin: 0 3.5px 20px;    background: #ddd;    vertical-align: top;    display: inline-block;    /* float: left; */  }

<div class="partners">    <div class="partners__container">      <div class="wrap">        <div class="partner__1 partner">          <div class="partner__wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__2 partner">            <div class="partner__wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__3 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">i inspiration nature , objects around me. have passion colours, typography , skateboards.</p>          </div>        </div>        <div class="partner__4 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>          <div class="partner__5 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__6 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__7 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__8 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>          <div class="partner__9 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__10 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__11 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>        <div class="partner__12 partner">            <div class="partner_wrap">            <h4 class="partner__name">in enim justo</h4>            <p class="partner__description">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>          </div>        </div>      </div>      </div>  </div>