As a newcomer to HTML/CSS, please excuse any mistakes I may make. My goal is to design a responsive social media footer using Font Awesome icons and Bootstrap. However, I am facing an issue with white spaces appearing on the sides of the footer. Any suggestions on how to resolve this?
Encountering white squares beside the icons
a {
text-decoration: none;
color: #fff;
}
ul {
padding:0;
list-style: none;
text-align: center;
}
.footer-social {
width: 50%;
display:block;
margin: 0 auto;
}
.social-icon {
color: #fff;
background-color: #000000;
}
.social-icons li {
vertical-align: top;
display: inline;
height: 100px;
text-align: center;
}
.social-icons a {
color: #fff;
text-decoration: none;
}
.fa-facebook {
padding:10px 16px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #000000;
font-size: 1.5em;
}
.fa-facebook:hover {
background-color: #3d5b99;
color: #ffffff;
}
.fa-twitter {
padding:10px 12px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #000000;
font-size: 1.5em;
}
.fa-twitter:hover {
background-color: #00aced;
color: #ffffff;
}
.fa-soundcloud {
padding:10px 10px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #000000;
font-size: 1.5em;
}
.fa-soundcloud:hover {
background-color: #eb8231;
color: #ffffff;
}
.fa-youtube {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #000000;
font-size: 1.5em;
}
.fa-youtube:hover {
background-color: #e64a41;
color: #ffffff;
}
.fa-instagram {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #000000;
font-size: 1.5em;
}
.fa-instagram:hover {
background-color: #0073a4;
color: #ffffff;
}
.fa-spotify {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #000000;
font-size: 1.5em;
}
.fa-spotify:hover {
background-color: #e25714;
color: #ffffff;
}
div {
background-color: #000000;
}<div class="footer-social">
<ul class="social-icons">
<li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-soundcloud"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-instagram"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-spotify"></i></a></li>
</ul>
</div>