CSS: Issue with the third inline-block element

Question

Below you can see a code that has 3 lines of inline-block elements. These lines absolutely the same. But the behavior of the third line is very strange. See it yourself at the code snippet. What's wrong with the third line? Why displayed so 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 get my inspiration from nature and objects around me. I have a passion to colours, typography and 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>

Answer 1

You have no height for your divs. add height on your partner css. try:

.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;
  height:100px;
}

<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 get my inspiration from nature and objects around me. I have a passion to colours, typography and 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>

Answer 2

.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: block;
    margin: 0 5px;
    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 get my inspiration from nature and objects around me. I have a passion to colours, typography and 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>

Answer 3

If you use float and 4 items per row, you'll need to clear the float on the 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 get my inspiration from nature and objects around me. I have a passion to colours, typography and 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 you use inline-block, you'll be fine. But you should not use float + inline-block, they don't work together that well.

My suggestion, stick with one of them, I'd vote for inline-block. And all the parter__* classes can be merged into one I think. Another point worth to mention - How to remove the 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 get my inspiration from nature and objects around me. I have a passion to colours, typography and 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>