https://repl.it/@HussainOmer/SantaKausgithubio-3#index.html
You shared your code in your previous question.
You have body with display grid property.
place-items to stretch to achieve the same effect.
Is this how you want it to look? I added display grid to anchor’s parent, made container’s width auto, and at the end added margin auto to anchors themselves:
#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;
display: grid;
grid-template-columns: auto auto auto;
}
#footer .social-links a {
font-size: 18px;
display: inline-block;
background: #0563bb;
color: #fff;
line-height: 1;
padding: 8px 0;
border-radius: 50%;
text-align: center;
width: 36px;
height: 36px;
transition: 0.3s;
margin:auto;
}
#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">
© <strong><span>my name</span></strong> 2021
</div>
</div>
</footer>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">
© <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.
I’m sorry but it seems that we can’t help you without reproducing the problem, check if there are any other styles that affect width (like setting width or display)
open your repl and take a look at body styles. i’ll add screenshot
@sidekick12 I added a ss
@sidekick12 as you can see on the ss it’s in file skills.css on the line 8