Why are borders causing div to overflow container?

Question

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

Answer 1

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/