Footer not enlarging/expanding

I created a website, and I want to expand my footer because right now it looks like this:

It should cover the whole website and I tried increasing the width, but that did not work.

This is the HTML/CSS of the footer:

#footer {
  background: #f7f8f9;
  color: #45505b;
  font-size: 14px;
  text-align: center;
  padding: 30px 0;
}

#footer h3 {
  font-size: 36px;
  font-weight: 700;
  position: relative;
  font-family: "Poppins", sans-serif;
  padding: 0;
  margin: 0 0 15px 0;
}

#footer p {
  font-size: 15;
  font-style: italic;
  padding: 0;
  margin: 0 0 40px 0;
}

#footer .social-links {
  margin: 0 0 40px 0;
}

#footer .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #0563bb;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .social-links a:hover {
  background: #0678e3;
  color: #fff;
  text-decoration: none;
}

#footer .copyright {
  margin: 0 0 5px 0;
}

#footer .credits {
  font-size: 13px;
}

 <footer id="footer">
    <div class="container">
      <h3>My name</h3>
      <p></p>
      <div class="social-links">
        <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/kaustubh-prabhakar/" class="linkedin"><i class="bx bxl-linkedin"></i></a>
        <a target="_blank" rel="noopener noreferrer" href=href="https://github.com/SantaKaus" class="github"><i class="bx bxl-github"></i></a>
        <a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/santa_kaus/" class="instagram"><i class="bx bxl-instagram"></i></a>
      </div>
      <div class="copyright">
        &copy; <strong><span>my name</span></strong> 2021
      </div>
    </div>
  </footer><!-- End Footer -->

I got the whole footer code from another source, and I tried copying and pasting the code exactly it is, but for some reason, I cannot get it to expand more idk why. Can you guys please help?

When you run the above code, it outputs fine but on my end, I am getting the output in the picture I sent above.

Is the problem occurring because I may be overriding other CSS elements with it? I have multiple CSS files and I tried changing the names of the footer CSS class but it still didn’t work.

Answer

https://repl.it/@HussainOmer/SantaKausgithubio-3#index.html

You shared your code in your previous question. You have body with display grid property.

First, seems you don’t use grid at all, you can just delete this property.
Also you can set place-items to stretch to achieve the same effect.
Seems just setting width of the footer to 100% works fine too

Advertisement

Answer