Question

I have got a footer on my homepage that weirdly has a margin around it for no apparent reason (seems to me at least). I just want a footer pretty much like the on this very page. Just a plain footer with 100% width. The problem is (as you can hopefully see in the picture I provided), there is a margin on the left, right and bottom of about 9px.

Here is the CSS: 

#footer_container{

    background: #181818;
    height: 200px;
    width: 100%;
    bottom:0;
    left:0;
    margin:0px 0px 0px 0px;
}

HTML 

<body>
</body>
<div id="footer_container">
</div>

This is what it looks like:

enter image description here

Was it helpful?

Solution

Add a CSS rule for the HTML body:

body {
    padding: 0;
    margin: 0;
}

And your body should look like this (div inside body):

<body>
    <div id="footer_container">
    </div>
</body>

OTHER TIPS

There are two things wrong here, your footer is outside your body:

<body>
  <div id="footer_container">
  </div>
</body>

And you need to get rid of the margin on the body, then width:100% will work

body {
    margin:0;
}
#footer_container{

    background: #181818;
    height: 200px;
    width: 100%;
    bottom:0;
    left:0;
    margin:0px 0px 0px 0px;
}

I've popped it in to a JSfiddle so you can see it working.

On a side note: if your footer is for some reason deliberately outside the body I strongly recommend you change this to ensure compatibility and SEO factors I'm sure are affected by that

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top