css框/网格布局不正确

Question

所以我正在尝试在我的网站上设置一个盒子类型的布局，但这些盒子没有正确安装到位（它有我想要盒子插入的间隙）。基本上我希望我的盒子能够很好地配合在一起，每个盒子之间的间距为10px。我已经设置了JSFiddle目前正在做的事情。任何帮助将不胜感激！

这是我的代码：

<div class="wrapper boxes">
  <div class="container">
    <div class="box col-4-4">xxx</div>
    <div class="box col-1-1">xxx</div>
    <div class="box col-1-2">xxx</div>
    <div class="box col-1-1">xxx</div>
    <div class="box col-2-1">xxx</div>
    <div class="box col-4-4">xxx</div>
    <div class="box col-1-1">xxx</div>
    <div class="box col-1-1">xxx</div>
    <div class="clear"></div>
  </div>
</div>

CSS：

.container{width:1170px}
.boxes{margin:40px 0 30px}
.boxes:after{content:"";display:table;clear:both}
.boxes [class*='col-']{float:left;background:#f9f}
.boxes .col-1-1{width:260px;height:160px}
.boxes .col-1-2{width:260px;height:330px}
.boxes .col-2-1{width:530px;height:160px}
.boxes .col-4-4{width:530px;height:330px}
.boxes [class*='col-']{margin-right:10px;margin-bottom:10px}