Why does my header not "hug" the edges of the browser viewport?

Question

HTML noob here.

Given the following html and css files, can someone tell me why my header does not hug the left and top edge of the viewport?

In other words, why is there white space above the grey box, and to its left, even though margin and border are set to 0?

picture of problem

.html file:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="css/site.css" rel="stylesheet" type="text/css"/>
</head>

<body>
    <div id="wrap" >
        <div id="headerbar">
            <p>Header</p>
        </div>
    </div>
</body>

</html>

.css file:

p {
    font-family:verdana;
    font-style: bold;
    font-weight: 300;
    font-size: 3em;
}

#headerbar {
    width:3000px;
    margin:0px;
    border:0px;
    padding:30px;
    background: grey;
    font-size: 1em;
}

pavel · Accepted Answer · 2015-02-27T14:21:36.020

2

There is default margin: 8px on body. You can remove that using:

body {margin: 0;}

NOTE:
You set border: 0; margin: 0; to div where these are defaults. You can remove them there.

edited Feb 27 '15 at 14:21

answered Feb 27 '15 at 14:16

pavel

26,538
10
45
61

Aaron · Answer 2 · 2015-02-27T14:21:09.697

1

Give the body a 0 margin.

body {margin: 0; padding: 0;}

edited Feb 27 '15 at 14:21

answered Feb 27 '15 at 14:16

Aaron

10,187
3
23
39

2

lol, downvote for what? – Aaron Feb 27 '15 at 14:17
Maybe because you write correctly _body {margin: 0;}_ but in your code you have a lot of mess? `HTML` has `margin/padding 0` by default, `body` has the `zero padding` too by default. – pavel Feb 27 '15 at 14:19

score 0 · Answer 3 · answered Feb 27 '15 at 14:17

0

In most browsers, the body has a default margin. Add this to your css file:

body {
   margin: 0px;
}

answered Feb 27 '15 at 14:17

Jakub Bilko

111
3

Why does my header not "hug" the edges of the browser viewport?

3 Answers3