Why do borders lead to container overload?

Question

I have a section set to a fixed width and an inner width width of 100% with a border of 5 pixels.

It looks good, but you can say that the containing div is a bit off center and it will not be without a border, which I need to fit the client comp.

The code is pretty simple:

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

Run codeHide result

The only thing I can think of is to make the width .info-boxequal to 98% or something like that, but that still doesn't work. So what will happen?

By the way, I already tried to add relative positioning, set the display to inlineinstead of inline-block.... none of which worked.

Answer 1

box-sizing: border-box; info-box

.info-box {
    background: rgba(248, 243, 232, 0.5) none repeat scroll 0 0;
    border: 5px solid #0033a0;
    box-sizing: border-box;
    display: inline-block;
    padding: 48px 0;
    text-align: center;
    width: 100%;
}

box-sizing https://css-tricks.com/box-sizing/