Header and Footer width


I am a beginner at CSS and just finished the Build a Resume exercise. Although I have both my header and footer set at the same width in my CSS, they show up differently in the web browser. I am stumped as to what is causing this. Can anyone tell me what's going on?


padding increases an element, so your #header is actually 520px in width (10 padding + 500 width + 10 padding) (i recommend to specify px inside the padding: padding: 20px 10px 0 10px

You could add also padding to the #footer, or you could add: box-sizing: border-box to your div css selector, this will make border and padding part of the width and height of an element rather then expanding it. You can read more about box-sizing here