Warum verursachen Grenzen einen Überlauf des div-Containers?

Ich habe einen Abschnitt mit einer festen Breite und einer 100% -Breite geteilt mit einem 5-Pixel-Rand.

Sieht gut aus, aber man merkt, dass das enthaltende Div etwas außerhalb der Mitte liegt und es nicht ohne den Rand wäre, den ich für das Client-Comp brauche.

Der Code ist ziemlich einfach:

#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>

Das einzige, was ich mir vorstellen kann, ist die Breite des @ zu mach.info-box 98% sein oder so, aber das wird immer noch nicht wirklich funktionieren. Also wird irgendetwas?

BTW, ich habe bereits versucht, relative Positionierung hinzuzufügen, setze die Anzeige aufinline Anstatt voninline-block .... keiner davon hat funktioniert.

Antworten auf die Frage(2)

Ihre Antwort auf die Frage