This is telling the browser that the width of #header should be 100% with a padding of 30px. Since padding is not counted into the width, the actual width ends up to be 100% + 60px. So, in order to make sure this fits into the page, you need to subtract 60px (30px to the left + 30px to the right) from the 100% width and it will fit into the browser. Luckily you are easily able to do this with CSS: #header{ padding: 30px; width: calc(100% - 60px);

Thats because you have both width and padding set to one element. And by default padding is added on top of width. (Making it 100% + 2*30px of width). #header{ padding: 30px; width: 100%; } Either remove padding and add it to an inner element with no width set, or use: box-sizing: border-box; Which makes the width calculation include padding. :)

But in most cases, I strongly recommend you use padding inside a box, rather than margins, to ensure you don’t have this problem.