css margin left and right issues

i want to get the bit at the top of some websites that really thin and right at the top. which looks like facebooks blue banner at the top of their website.

the code i have tried for the abov开发者_如何学JAVAe is:

<div style="height:20px; background-color:grey; margin-top:-10px; "></div>

and it works apart from theres just a little bit of white space at the right and left sides of the grey.

Does anyone know what i am doing wrong?

It sounds like you haven't cleared the padding/margin on the body element. Give this a go:

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

Also, give your div a width of 100%:

div
{
    width: 100%;
}

I've probably gone a bit overboard with the CSS, but it will make sure everything works.

Additionally, make sure there is an HTML doctype defined - this can cause some other problems later one, such as :hover not working.

You need to use margin:0 on the html and body tags. This will allow your div to take up all the available horizontal space, and put it right at the top instead of having a small space.