Css 响应等宽

我正在将960网格12列响应设计转换为HTML。它有三个独立的div，每个div的宽度为300px，右边距为20px。这是我的密码

HTML

 <section class="container">
        <h1>Services</h1>
        <div class="box">
            box1
        </div>
        <div class="box">
            box2
        </div>
        <div class="box last">
            box3
        </div>
    </section>

---

我的问题是带有类名的div框不适合容器div。最后一个div打破了界限，位于其他两个div的下方。不知道我哪里出错了。

您有3个框，宽度为31.25%，每个框上都有额外的6.67%的边距，除了最后一个。 这相当于总宽度的107.09%，因此无法适应其容器宽度

降低数字，使总数小于100%

---

此外，您还应通过20/960正确计算边距。

您有3个宽度为31.25%的箱子，每个箱子上额外有6.67%的边距，最后一个除外。 这相当于总宽度的107.09%，因此无法适应其容器宽度

降低数字，使总数小于100%

---

另外，你应该通过20/960计算保证金权利。

我认为问题在于你的保证金权利

它应该是20除以960，即0.0208333333，反过来变成2.0833333333%

---

在响应式设计中，裕度是从父容器而不是子元素计算的。

我认为问题出在您的裕度上

它应该是20除以960，即0.0208333333，反过来变成2.0833333333%

---

在响应式设计中，边距是从父容器而不是子元素计算出来的。

Should.branding not.box？Should.branding not be.box？是的，但我添加了一个名为last的类，它将使最后一个div边距为0。是的，但它仍然太宽。（编辑了答案以便你能看到。）谢谢你的回复，吉米。我找到了比利提到的答案。这实际上是我的错误，我应该以父div宽度作为边距的目标。但我所做的是用同一个有保证金的div计算的。无论如何，再次谢谢。没问题。很高兴你发现了这个问题！是的，但我添加了一个名为last的类，它将使最后一个div的边距为0。是的，但它仍然太宽。（编辑了答案以便你能看到。）谢谢你的回复，吉米。我找到了比利提到的答案。这实际上是我的错误，我应该以父div宽度作为边距的目标。但我所做的是用同一个有保证金的div计算的。无论如何，再次谢谢。没问题。很高兴你发现了这个问题！是的，你说对了，比利。我已将上下文计算为框，该框应为容器宽度。谢谢，问题解决了。应该做的是-20px/960px。我所做的是-20px/300px。是的，比利，你说对了。我已将上下文计算为框，该框应为容器宽度。谢谢，问题解决了。应该做的是-20px/960px。我所做的是-20px/300px。

.container{
      max-width: 960px;
      width: 98%;
      margin: 0 auto;
      padding: 0 1.04166666666667%;/*10px / 960px*/
 }
.box{
     width: 31.25%;/*300px / 960px*/
     margin-right: 6.66666666666667%;/*20px / 300px*/
     float: left;
     background: red;
     margin-bottom: 10px;
 }
.last{
   margin-right: 0;
}