How can I remove the space around my background-colored header in an html page?

Question

I just started building a webpage using html and made a simple header for it. I want the header to be exactly along the borders of the screen but there is a white space all around my header. This is how it looks:

I changed my css by setting the margin, border and outline of my header to 0. But this doesn't seem to do the work and the white space is still there. Here is my code:

<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
    <style type="text/css">
        h1{
            margin:0 auto;
            padding:20px;
            border:0;
            outline:0;
            background: #003399;
            color: #ffffff;
            font-family: "Calibri";
            font-weight: normal;
        }
    </style>
</head>
<body>
    <header>
        <h1>This is my website.</h1>
    </header>
</body>
</html>

I can't figure out what my error is. Please anyone help. Thanks for the attention.

You should set it to your `body` tag. It has `padding` by default. — Ivanka Todorova, May 22 '17 at 08:54
You can use the dev tools to find whether an element has padding/margin and what's their width or height. https://www.bu.edu/tech/services/cccs/websites/www/wordpress/how-to/find-area-width/ — Ivanka Todorova, May 22 '17 at 08:57

score 1 · Answer 1 · answered May 22 '17 at 08:55

1

By default body tag take some CSS, just add following css for this

body {
    margin: 0px;
    padding: 0px;
}

answered May 22 '17 at 08:55

Super User

9,448
3
31
47

score 0 · Answer 2 · edited May 22 '17 at 10:37

0

Add this css

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

edited May 22 '17 at 10:37

Super User

9,448
3
31
47

answered May 22 '17 at 08:56

LKG

4,152
1
11
21

just fyi, if the value is `0px` you can remove the "px" notation. – KarelG May 23 '17 at 06:35

score 0 · Accepted Answer · answered May 22 '17 at 09:00

In all my projects I place this code just at the start of my CSS files:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

So I have more control about margins, paddings and sizes (box-sizing: border-box makes borders and padding being applied inside the container size, not as an extra size, so it's easier to play with percentage sizes).

Another option is to put normalize.css before your styles, that already includes usual corrections like these.

How can I remove the space around my background-colored header in an html page?

3 Answers3