Footer doesnt reach edges even though margin etc is defined?

Question

Im starting to feel crazy here. My footer doesnt reach the window edges even though its defined (at least i think so)

.footer {
  height: 200px;
  bottom: 0px;
  margin: 0px;
  left: 0px;
  right: 0px;
  padding: 0px;
  width: 100%;
  background-color: #E5E5E5;
  text-align: center;
}

<footer>
  <div class="footer">
    <p>Footer</p>
  </div>
</footer>

*My footer doesnt reach the window edges*, what do mean by this? — SMAKSS, May 27 '20 at 12:33

score 1 · Accepted Answer · answered May 27 '20 at 12:38

1

I removed margin from html and body tag

 html,body{
    margin:0;
 }
.footer {
 height: 200px;
 bottom: 0px;
 margin: 0px;
 left:0px;
 right:0px;
 padding: 0px;
 width: 100%;
    background-color: #E5E5E5;
    text-align: center;
}

<footer>
 <div class="footer">
  <p>Footer</p>
 </div>
</footer>

answered May 27 '20 at 12:38

Nilesh Chavan

361
3
10

thank you so much didnt know there is some hierachy thing going on :D – awesome_o May 27 '20 at 13:24

Footer doesnt reach edges even though margin etc is defined?

1 Answers1