css - 为什么我的专栏下降了？

Question

http://codepen.io/anon/pen/OMLLwB

    #news {
    width: 85%;
    margin: 0 auto;
}

#news ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#worldMap img {
    width: 100%;
}

.newspiece {
    margin-bottom: 2.5%;
    padding: 20px;
    background-color: #90C3D4;
    height: 130px;
}

.newspiece h3 {
    border-bottom: 3px solid black;
    margin-bottom: 10px;
}

@media(min-width: 600px) {
    .newspiece {
    width: 25%;
    margin-left: 5%;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    }

  .newspiece:first-child {
    margin-left:0;
  }
}

我在这里遗漏了什么吗？总容器(#news)的宽度为85%，每个元素的宽度为25%，其中两个有5%的左边距，总和为85%，那我为什么要调整它的大小，最右边的列去下来？

Answer 1

我已经更改了您的 html/css。这是一个更简洁的解决方案，所有浏览器都支持

html:

 <div class="flex">
  <div class="box">
    <h3>Title</h3>
    <p>Content</p>
  </div>
   <div class="box">
     <h3>Title</h3>
    <img src="http://www.placecage.com/400/300" alt="">
  </div>
   <div class="box">
     <h3>Title</h3>
     <p>Content</p>
   </div>
</div>

CSS:

.flex {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.box {
  width: 300px;
  margin: 10px;
  padding: 20px;
  background: #90C3D4;
}

.box h3 {
  padding-bottom: 5px;
  border-bottom: 3px solid black;
}

.box img {
  max-width: 100%;
}