Css: How Can I Get Rid Of The Default Window "padding"? An Element Set To 100% Width Doesn't Reach The Window's Borders

So I have an element that is placed directly inside body:

Some stuff...

Other stuff... The following is the C

Solution 1:

body has default margins on all browsers, so all you need to do is shave them off:

body {
    margin: 0;
    text-align: center;
}

You can then remove the negative margins from #header.

Solution 2:

An easy way to solve this problem is by getting rid of all the margins. And you can do that by the following code:

* {
    margin:0;
}

This will solve the problem and will give you finer control over the margins of all elements.

Solution 3:

Add these to the style tag in body, like the following one:

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

It worked for me. Good luck!!

Solution 4:

I found this problem continued even when setting the BODY MARGIN to zero.

However it turns out there is an easy fix. All you need to do is give your HEADER tag a 1px border, aswell as setting the BODY MARGIN to zero, as shown below.

body { margin:0px; }

header { border:1px black solid; }

Not sure why this works, but I use Chrome browser. Obviously you can also change the colour of the border to match your header colour.