Why does my page header have gaps around it without color?

css, html

Solution

This can be caused by the margin/padding on the `body` or `html` elements, but it can also be caused by the margin on your `h1` element.

See this jsFiddle.

header {
    background-color: pink;
}

header h1 {
    margin: 0;
}

html, body {
    margin: 0;
    padding: 0;
}

<header>
    <h1>Title</h1>
</header>

Problem

I was trying to fill the entire `<header>` with the background color, but the problem is that when I try to view the page, instead of filling the entire `<header>` with the color, there are white color borders on top, left and right of the `<header>`. May I know the reason why the background color doesn't fill the whole `<header>` space entirely? ``` header { background-color: #ECF3F3; } ``` ``` <body> <header> <h1>Food Hunt</h1> </header> <nav> </nav> <aside> </aside> <footer> </footer> </body> ```

Original source