Percentage columns not aligned

Follow the FIDDLE

I simply set 30% width for the section, and in the middle section I gave a margin of 5% left and right, thus adding: 30% + 5% + 30% + 5% + 30% = 100 %.
Where, 30% corresponds to the space that the section occupies, and 5% corresponds to the space between section .

article section                  { width: 30%; float:left; }
article section:nth-child(2)     { margin: 0 5%; }

RESPONSIVITY:
When using percentage, everything becomes relative, so if you want to align 3 Divs laterally, you should consider EVERYTHING that can increase your side dimensions, such as:
- Border (right and left)
- Padding (right and left)
- Margin (right and left)
- Width (mainly the width of the div itself)

From this, one should think as follows. If I want a div that occupies 100% of the available width, having 5% of padding in both the direct and the left, the following CSS rules should apply:

.classe-da-div{
  width: 90%;
  padding-left: 5%;
  padding-right: 5%; 
/* 
    90% + 5% padding-left + 5% de padding-right = 100% 
*/
}

RESPONSIVITY WITH EDGES

If you want to apply responsivity in blocks using borders, just apply the box-sizing: border-box property in this way the width of the block automatically becomes the sum of the content with the border and padding, see example:

.classe-da-div{
box-sizing: border-box;
width: 30%; /* Dentro desses 30% já estão calculadas as bordas e os paddings abaixo */
padding: 5%;
border: 1px solid #CCC;
}
.classe-da-div:nth-child(2){
margin: 0 5%; /* Margem pra direita e pra esquerda da div do meio */
}

Following this reasoning, you can build a block with 3 divs aligned laterally, just add the divs' percentage width and divide the remainder into the margins.

See that FIDDLE that I did, it will help.

The problem is that the widths are relative to the container. That 1% that is left over is not enough to accommodate 60px of the margins.

The simplest solution (but that does not work in IE9 and earlier) is to use the properties of CSS3 columns:

article {
    /* 3 colunas, 10px entre elas */
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px;
       -moz-column-count: 3; 
       -moz-column-gap: 10px;
            column-count: 3; 
            column-gap: 10px;
}

link