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.

questionAnswers(1)

yourAnswerToTheQuestion