Can't Horizontally Align - html

Question

I am trying to horizontally align the social icons in my footer but I can't figure it out.
#font-face {
font-family: 'free pixel';
src: url(../assets/fontface/FreePixel.ttf);
font-style: normal;
}
body {
background-color: black;
}
a {
text-decoration: none;
}
a:visited{
text-decoration: none;
}
a:hover {
text-decoration: none;
}
li {
list-style: none;
}
h1 {
color: white;
}
/* x Global & General x */
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: black;
font-family: 'free pixel';
}
.logo{
color: green;
font-size: 30px;
cursor: pointer;
}
.k-hole-logo{
color: green;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links a{
color: green;
text-decoration: none;
letter-spacing: 3px;
font-size: 15px;
}
.nav-links li {
list-style: none;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
margin: 5px;
background-color: green;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width: 768px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 33%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
#social-icons {
position: fixed;
bottom: 0;
width: 100%;
}
#social-icons ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#social-icons ul li a{
display: block;
color: green;
text-align: center;
padding: 16px;
text-decoration: none;
}
I have included all the CSS in case it is some issue with priority and I've done something in a previous section that is wrong. I am trying to center the social icons and have them be horizontally aligned with a bit of space between them...the section of the HTML I am trying to alter looks like this:
<footer>
<div id="social-icons">
<ul>
<li>
<i class="fab fa-twitter-square"></i>
</li>
<li>
<i class="fab fa-facebook-square"></i>
</li>
<li>
<i class="fab fa-instagram-square"></i>
</li>
</div>
</ul>
</div>
</footer>
Thanks! I appreciate the help!

Answer 1

First, remove the display: block from the <a> style, that's working against you.
Second, you want to declare a style for each <li> that says you want them to be displayed inline.
Third, you want to tell the whole #socialicons <div> to display the text centered on the page.
Here's what I'd change the CSS to:
#social-icons {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
#social-icons ul {
list-style-type: none;
padding: 0;
overflow: hidden;
}
#social-icons li {
display: inline;
}
#social-icons ul li a{
color: green;
text-align: center;
padding: 16px;
text-decoration: none;
}

Answer 2

If you are trying to align the items using Flexbox CSS properties, you need to apply display: flex; in the element wrapping the items you want to align.
In your specific case modify the #social-icons ul to include display: flex and this should do the trick.
#social-icons ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
}