Responsive equal widths

Question

I'm converting a 960grid 12col responsive design to HTML. It has a three separate div each with 300px wide and margin-right of 20px width. Here is my code.

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;
}

And my problem is the div with class name box is not fitting inside the container div. The last div breaks the line and comes below the other two div. Refer this. Don't know where I'm getting wrong.

Answer 1

I think it's your margin-right which is the problem.

It should be 20 divided by 960 which is 0.020833333333333333333333333333333 which in turns becomes 2.0833333333333333333333333333333%

In responsive design the margin is calculated from the parent container not the child element.