Por que as bordas estão causando o estouro do contêiner div?
Eu tenho uma seção definida para uma largura fixa e uma div de 100% de largura dentro dela com uma borda de 5 pixels.
Parece bom, mas você pode dizer que a div que contém está um pouco fora do centro e não ficaria sem a borda, o que eu preciso para corresponder ao comp do cliente.
O código é bastante direto:
#info {
max-width: 980px;
margin: 0 auto;
}
.info-box {
border: 5px solid #0033A0;
display: inline-block;
text-align: center;
padding: 48px 0;
width: 100%;
}
<section id="info">
<div class="info-box">SOME CONTENT</div>
</section>
A única coisa que consigo pensar é fazer a largura do.info-box
98% ou algo assim, mas isso ainda não vai funcionar de verdade. Então, alguma coisa?
BTW, eu já tentei adicionar posicionamento relativo, defina a exibição comoinline
ao invés deinline-block
.... nenhum dos quais funcionou.