¿Por qué los bordes hacen que div desborde el contenedor?
Tengo una sección establecida en un ancho fijo y una división de ancho del 100% dentro de ella con un borde de 5 píxeles.
Se ve bien, pero se puede ver que el div que contiene está un poco descentrado y no estaría sin el borde, que necesito para que coincida con la composición del cliente.
El código es bastante sencillo:
#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>
Lo único que puedo pensar es hacer el ancho de la.info-box
ser 98% o algo así, pero eso todavía no va a funcionar realmente. ¿Entonces algo?
Por cierto, ya intenté agregar posicionamiento relativo, establecer la pantalla eninline
en lugar deinline-block
.... ninguno de los cuales funcionó.