¿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ó.

Respuestas a la pregunta(1)

Su respuesta a la pregunta