Strange Margin At Top Of Page

Question

I'm in the early stages of building a website for a renovation company, but I'm having a strange formatting issue. There's a margin at the top of the page, creating a gap between the header and the top of the browser. The page is here. I've already initialized padding on the page, so I'm not really sure what is causing it.

On another (perhaps related) note, the css styles don't appear to be applied to the pages correctly. It looks correct on my brackets server, but the header isn't the right size and is missing the background image, and the nav bar isn't positioned correctly.

This is what it should look like:

Answer 1

Set padding to outer div:

header {
    padding-top: 1px;
}

It happens when you set margin-top to inner div, when outer div has no padding-top.

Answer 2

On line 27 of styles_desktop.css you have all your header tags set with a margin-top of 10px.

Therefor your "World of Windows" header is being pushed down 10px from the top of the page.

Answer 3

It's likely margin collapsing of the "world of windows" text at the top. If there is a margin-top on that element, that margin-top is likely bleeding outside of the container.

I would recommend removing that top-margin and using padding-top on the parent container instead if you need space there.

If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

Answer 4

Use css to set the margin.

h1 {margin-top:0px;}