footer wont stay right at the bottom

[rowlandsfc]

my footer wont go right to the bottom, it is at the bottom but there is a gap between the bottom and the footer

 

 

 

  <!-- Footer -->
  <footer id="footer" class="section footer">
    <div class="container">
      <div class="footer-container">
        <div class="footer-center">
          <h3>EXTRAS</h3>
          <a href="#">Gift Certificates</a>
          <a href="#">Affiliate</a>
          <a href="#">Specials</a>
          <a href="#">Site Map</a>
        </div>
        <div class="footer-center">
          <h3>INFORMATION</h3>
          <a href="#">About Us</a>
          <a href="#">Privacy Policy</a>
          <a href="#">Terms & Conditions</a>
          <a href="#">Contact Us</a>
          <a href="#">Site Map</a>
        </div>
        <div class="footer-center">
          <h3>MY ACCOUNT</h3>
          <a href="#">My Account</a>
          <a href="#">Order History</a>
          <a href="#">Wish List</a>
          <a href="#">Newsletter</a>
          <a href="#">Returns</a>
        </div>
        <div class="footer-center">
          <h3>CONTACT US</h3>
          <div>
            <span>
              <i class="fas fa-map-marker-alt"></i>
            </span>
            40 Heol-Frenhines Bridgend CF314RN Wales
          </div>
          <div>
            <span>
              <i class="far fa-envelope"></i>
            </span>
            bubbleandbalm@gmail.com
          </div>
          <div>
            <span>
              <i class="fas fa-phone"></i>
            </span>
            01656 352 452
          </div>
        </div>
      <div class="footer-center">
        <div class="payment-methods">
          <img src="images2/payment-methods.png" alt="">
        </div>
      </div>
      </div>
    </div>
  </footer>

footer css

/* FOOTER */

.footer {
  background-color: var(--black);
  padding: 6rem 1rem;
  line-height: 3rem;
}

.footer-center span {
  margin-right: 1rem;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  color: var(--white);
}

.footer-center a:link, 
.footer-center a:visited {
  display: block;
  color: #f1f1f1;
  font-size: 1.4rem;
  transition: 0.6s;
}

.footer-center a:hover {
  color: var(--primary);
}

.footer-center div {
  color: #f1f1f1;
  font-size: 1.4rem;
}

.footer-center h3 {
  font-size: 1.8rem;
  font-weight: 400;
  margin-bottom: 1rem;
}

.footer .payment-methods {
  margin-top: 2rem;
}

@media only screen and (max-width: 998px) {
  .footer-container {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2rem;
  }
}

@media only screen and (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }

 

[NotSunfighter]

It just might be the browser, and that might not be fixable. Add this to your CSS temporarily and see were the bottom line is:

body{
  margin:0;
  padding:0;
  outline: 1px solid red;
}

 

[maxxd]

Wrap your entire page structure in a div, give it display: flex, flex-direction: column, and min-height: 100vh. Give the header and footer a max-height and flex-grow: 0, then assign the body div a flex-grow: 1. Sticky footer with dynamic page height, and unless you're still supporting < IE 9, should be pretty universally cross-browser by now.

Edited May 11, 2021 by maxxd
typo