Question

I am trying to use a shape (made with CSS), and have it placed up against the top of the HTML page. Please see the image below for an example. I want the gray rectangle to be at the top of the HTML page with no gap on the top, right, or left sides. I’m terribly new to CSS and HTML so sorry if this is a trivial question. I am only using CSS 3 and HTML 5, maybe a little JavaScript later.

What I want… (notice there is not gap above the gray rectangle)

What I have now… (notice the white gap above the gray rectangle)

Here is my CSS code:

#header {
margin: auto;
width: 1050; 
height: 120px; 
background: rgb(45,45,45); 
}

Answer 1

Try removing the padding and margin from the body.

body {
margin: 0;
padding: 0;
}