Fixed Header Displayed Over Content, But There Is A Gap At The Top,

so I have fixed and centered the header, and the z-index achieves it being over the top of content that scrolls, however there is a small gap at the top. I tried using overflow:au

Solution 1:

Add this to your CSS:

html{
    margin-top:0;
    padding-top:0;
}
body{
    margin-top:0;
    padding-top:0;
}

Solution 2:

By default, the page has a small amount of margin.

Therefore, for things like this, we need to reset the margin and padding to 0.

I also usually set the width and height to 100% as well, like this:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%
}

The reason that jsFiddle displays it fine is that it has already reset the margin and padding.

Solution 3:

Add inside the header:

<header style="top: 0px">