My challenge is creating a page layout where multiple items each have a 33.33% width to fill the entire page, with a desired 20px margin between them. However, adding this margin only on the right of every 1st and 2nd item in a row causes layout issues. You can view the problem by removing the commented-out CSS in the provided JSFiddle link.
The question at hand is: How can I achieve a consistent 20px margin while keeping all .item divs the same size? Simply adjusting the percentage width or incorporating the removed width of an .item as margin won't provide a stable 20px due to the nature of 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;
}*/