960grid12colレスポンシブデザインをHTMLに変換しています。それぞれ幅300px、幅20pxのマージン右の3つの別々のdivがあります。これが私のコードです。
HTML
<section class="container">
<h1>Services</h1>
<div class="box">
box1
</div>
<div class="box">
box2
</div>
<div class="box last">
box3
</div>
</section>
CSS
.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;
}
そして、私の問題は、クラス名ボックスのあるdivがコンテナのdiv内に収まらないことです。最後のdivは境界線を破り、他の2つのdivの下になります。これを参照してください。どこが間違っているのかわからない。