使用[.grid，.col-1-3，.col-2-3]无法正确加载列

Question

使用下面的CSS代码，我创建了3个单独的列，分别设置了宽度，间距等。 但是，尽管第三列最初加载在第三列（最右边）Example，但第三列仍继续加载到第一列下方。

我已经为各列附加了CSS代码以及与之对应的HTML示例。

故障排除受到限制，因为它似乎只是在我玩图像时发生的。我已经还原了更改，但列仍然扭曲。

}
.container,
.grid {
  margin: 0 auto;
  width: 960px;
}
.container {
  padding-left: 30px;
  padding-right: 30px;
}
.grid,
.col-1-3,
.col-2-3 {
  padding-left: 15px;
  padding-right: 15px;
}
.col-1-3,
.col-2-3  {
  display: inline-block;
  vertical-align: top;
}
.col-1-3 {
  width: 33.33%;
}
.col-2-3 {
  width: 66.66%;
}

<section class="teaser col-1-3">
  <a href="example.html">
    <h5>example</h5>

    <h3>Example Example!</h3>
  </a>
  <p>Example Example Example.</p>
</section>

我希望3列（几乎包含HTML代码中详细信息的信息框）