title: Combine divs with percentage width with margin in pixels
body: <p>I have a page with multiple items, which have a 33.33% width to fill up the complete width of the page. However, I want to add a 20px margin between the items (both vertically and horizontally, but vertically is the problem here), but just adding a 20px margin on the right of each 1st and 2nd item in a row, destroys the complete page. (remove the commented-out CSS from the fiddle to see what I mean).</p>
  
  <p><a href="http://jsfiddle.net/htL6y5Lp/1/" rel="noreferrer">JSfiddle</a></p>
  
  <p>Now, the question: How do I add a 20px margin and make sure all <code>.item</code> divs keep the same size? I could play with the percentage of the width and adding the removed width of an <code>.item</code> as a margin, but this would never be a steady 20px, since, well, it's percentages.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div class="item"&gt;1&lt;/div&gt;
      &lt;div class="item"&gt;2&lt;/div&gt;
      &lt;div class="item"&gt;3&lt;/div&gt;
      &lt;div class="item"&gt;4&lt;/div&gt;
      &lt;div class="item"&gt;5&lt;/div&gt;
      &lt;div class="item"&gt;6&lt;/div&gt;
      &lt;div class="item"&gt;7&lt;/div&gt;
      &lt;div class="item"&gt;8&lt;/div&gt;
      &lt;div class="item"&gt;9&lt;/div&gt;
      &lt;div class="item"&gt;10&lt;/div&gt;
      &lt;div class="item"&gt;11&lt;/div&gt;
      &lt;div class="item"&gt;12&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#main .item {
      height: 100px;
      width:33.33%;
      float:left;
      text-align: center;
  }
  #main .item:nth-child(3n+1) {
      background: red;
  }
  #main .item:nth-child(3n+3) {
      background: yellow;
  }
  #main .item:nth-child(3n+2) {
      background:lightblue;
  }
  /*.item:nth-child(3n+1), .item:nth-child(3n+2) {
      margin-right: 20px !important;
  }*/
  </code></pre>