estou usando em meu site 3 colunas(sections) cada uma com 33,33% de width e com margin-left e right de 10px para as 3. Só que a última coluna está caindo para baixo. Por elas estarem com width em %, não deveriam se ajustar ao tamanho do meu container ao invés de cair?
<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>