title: Responsive equal widths
body: <p>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.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;section class="container"&gt;
          &lt;h1&gt;Services&lt;/h1&gt;
          &lt;div class="box"&gt;
              box1
          &lt;/div&gt;
          &lt;div class="box"&gt;
              box2
          &lt;/div&gt;
          &lt;div class="box last"&gt;
              box3
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>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. <a href="http://oi47.tinypic.com/fa6eev.jpg" rel="nofollow">Refer this.</a> Don't know where I'm getting wrong.</p>