Columns in percentage not aligned

Question

I am using on my site 3 columns(sections) each with 33.33% width and with margin-left and right from 10px to 3. Only the last column is falling down. Because they are width in %, they should not fit the size of my container instead of falling?

<main>
        <article>
            <section class="bg-col col-sm-4">
                <h2>Empresa</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <div class="more"><a href="empresa.php">Saiba Mais</a></div>
            </section>

            <section class="bg-col col-sm-4">
                <h2>Serviços</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <div class="more"><a href="servicos.php">Saiba Mais</a></div>
            </section>

            <section class="bg-col col-sm-4">
                <h2>Contatos</h2>
                <p>Tel: (xx) xxxx-xxxx</p>
                <p>E-mail: [email protected]</p>
                <div class="more"><a href="contatos.php">Saiba Mais</a></div>
            </section>
        </article>
    </main>

Answer 1

The problem is that the widths are relative to the container. This remaining 1% is not being enough to accommodate the 60px margins.

The simplest solution (but not working on IE9 and above) is to use the CSS3 column properties:

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;
}

http://jsfiddle.net/LguHE/

Answer 2

Follows the solution in FIDDLE

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

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

RESPONSIVENESS:
When using percentage, everything becomes relative, so if you want to align laterally 3 Divs, you should take into account 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 there, one should think as follows.
If I want a div that occupies 100% of the available width, having 5% padding in both direct and 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% 
*/
}

EDGE RESPONSIVENESS

If you want to apply responsiveness to blocks using edges, just apply the property box-sizing: border-box so the width of the block becomes automatically the sum of the content with the border and the padding, see the 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 assemble a block with 3 Ivs aligned laterally, just add in percentage the width of the Ivs and divide what remains for the margins.

Look at this FIDDLE that I made, will help you.