HTML width messed up by border

Question

HTML/CSS novice here.

Trying to put into practice what I\'ve learned on Codeacademy and I\'m stuck with an issue where my header which is set to width:100% ends up going

Answer 1

You could use box-sizing: border-box to calculate the width and height of the box including the paddings and borders.

Also, you could use * { box-sizing: border-box } on everything. as suggested by Paul Irish.

Answer 2

Adding a border increases the element's width past 100%.

You can play with the box model, as others have suggested, using box-sizing.

However, in this case, I suggest removing width:100%.
The <div> will span the entire width of the page by default.

You can also safely remove margin:auto.

div#header {
    height: 100px;
    background-color: white;
    border: 10px solid black;
    font-size: 80px;
    text-align: center;
    font-family: Helvetica, Ariel, Sans;
}

http://jsfiddle.net/93EPg/