1

I have a section set to a fixed width and a 100% width div inside of it with a 5 pixel border.

Looks fine but you can tell the containing div is a bit off center and it wouldn't be without the border, which I need to match the client comp.

The code is rather straightforward:

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

The only thing I can think of is to make the width of the .info-box to be 98% or something like that, but that's still not going to truly work. So will anything?

BTW, I already tried adding relative positioning, set display to inline instead of inline-block....none of which worked.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Adam Bell
  • 1,049
  • 1
  • 16
  • 50

1 Answers1

4

Add box-sizing: border-box; to your info-box class

.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 is better explained here https://css-tricks.com/box-sizing/

Sasikumar
  • 863
  • 5
  • 9