Get a div to go across the whole page

Question

Whenever i try to make a div with width 100%, it does not go across the whole page, it leaves small margins on either side(top bottom left and right), i would like the div to go across the whole page, such as the header bar on the top of this page.

Solution 1

You have to set margin and padding of body element to 0. Like this (in CSS):

body
{
  margin: 0;
  padding: 0;
}

And also remember about setting margin of div element to 0.

Solution 2

This is a body margin from the browser reset margin and padding:

body {
    margin: 0;
    padding: 0;
}

Solution 3

Try a CSS Reset:

* { margin: 0; padding: 0; }

That's a simple ones, there are thousands of more advanced ones across the web.

Solution 4

Do you have the body margins set to 0px? In your stylesheet set body { margin:0px; }. If you want to keep the body margins, you need to adjust the width of the div. Something like div#idOfDiv { margin-left:-10px; margin-right: -10px }

View more solutions