Combine divs with percentage width with margin in pixels

Question

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).

JSfiddle

Now, the question: How do I add a 20px margin and make sure all .item divs keep the same size? I could play with the percentage of the width and adding the removed width of an .item as a margin, but this would never be a steady 20px, since, well, it's percentages.

HTML

<div id="main">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
</div>

CSS

#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;
}*/

Answer 1

You could use calc() to subtract the 20px from 33.33%.

In this case, you would use width: calc(33.33% - 20px) to displace the margins.

Updated Example

#main .item:nth-child(3n+1),
#main .item:nth-child(3n+2) {
    width: calc(33.33% - 20px);
    margin-right: 20px;
}

Unfortunately, this will result in elements of differing widths (since the 20px isn't being subtracted from all the elements). A better solution would be to subtract 13.33px from all the elements (40px/3px):

Updated Example

#main .item {
    height: 100px;
    width: calc(33.33% - 13.33px);
    float:left;
    text-align: center;
}

Answer 2

Change the width of each .item class and calculate it using the calc()

#main .item {
    height: 100px;
    width:calc(33.33% - 20px);
    float:left;
    text-align: center;
}

Fiddle