Footer background color don't take full width and height

Question

For a project, I need to create the following footer

footer

However like I said in the title, my footer's background-color neither take the full width or 'bottom' of the screen, there is a white space.

I tried to apply width:100% on footer but it doesn't work. I also tried to fiddle a bit with flexbox, but it was also fruitless.

Here is my code:

footer {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  background-color: #F2F2F2;
  margin-top: 30px;
}

footer a {
  position: relative;
  right: 36px;
  color: black;
  text-decoration: none;
}

footer a:hover {
  color: #0065FC;
}

.footer-nav {
  display: flex;
  flex-flow: column wrap;
  list-style: none;
}

.footer-item {
  margin-top: 6px;
}

<footer>

  <nav>
    <h4>About</h4>
    <ul class="footer-nav">
      <li class="footer-item"><a href="#">Site Map</a></li>
      <li class="footer-item"><a href="#">General Terms and Conditions</a></li>
      <li class="footer-item"><a href="#">Data and Privacy</a></li>
    </ul>
  </nav>

  <nav>
    <h4>Our Accommodations</h4>
    <ul class="footer-nav">
      <li class="footer-item"><a href="#">Quality Assessments</a></li>
      <li class="footer-item"><a href="#">You have a hotel ?</a></li>
    </ul>
  </nav>

  <nav>
    <h4>Assistance</h4>
    <ul class="footer-nav">
      <li class="footer-item"><a href="#">Help Desk</a></li>
      <li class="footer-item"><a href="#">Contact Us</a></li>
    </ul>
  </nav>

</footer>

I thank in advance anybody who will take the time to help me.

Laaouatni Anas · Accepted Answer · 2022-08-04T20:54:58.983

for solving the issue about the space on the right and left use this code:

body {
  margin: 0;
}

this happens because the browser applies by default some margin, you just need to reset it. (override it)

body {
  margin: 0;
}

footer {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  background-color: #f2f2f2;
  margin-top: 30px;
}

footer a {
  position: relative;
  right: 36px;
  color: black;
  text-decoration: none;
}

footer a:hover {
  color: #0065fc;
}

.footer-nav {
  display: flex;
  flex-flow: column wrap;
  list-style: none;
}

.footer-item {
  margin-top: 6px;
}

<body>
  <footer>
    <nav>
      <h4>About</h4>
      <ul class="footer-nav">
        <li class="footer-item"><a href="#">Site Map</a></li>
        <li class="footer-item">
          <a href="#">General Terms and Conditions</a>
        </li>
        <li class="footer-item"><a href="#">Data and Privacy</a></li>
      </ul>
    </nav>

    <nav>
      <h4>Our Accommodations</h4>
      <ul class="footer-nav">
        <li class="footer-item"><a href="#">Quality Assessments</a></li>
        <li class="footer-item"><a href="#">You have a hotel ?</a></li>
      </ul>
    </nav>

    <nav>
      <h4>Assistance</h4>
      <ul class="footer-nav">
        <li class="footer-item"><a href="#">Help Desk</a></li>
        <li class="footer-item"><a href="#">Contact Us</a></li>
      </ul>
    </nav>
  </footer>
</body>

another solution can be using a fixed position or something similar to remove the element from the normal flow of the page, so you can position it where you want to.

footer {
  position: fixed;
  bottom: 0;
  left: 0;
}

but is better to use the <body> solution

Footer background color don't take full width and height

1 Answers1