图标栏周围出现空白区域

Question

我是HTML/CSS的初学者，所以请原谅我任何明显的错误。我正在尝试使用字体真棒图标和引导程序创建一个响应式社交媒体页脚。但是，页脚的两侧会出现空白。知道如何删除吗？

图标旁边出现白色方块

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>

Answer 1

.footer-social {
width: 100%;
display:block;
margin: 0 auto;
}

页脚栏似乎只有 50% 的宽度，请尝试将其更改为 100%，这应该使其跨越页面的整个宽度。

Answer 2

展开页脚全宽：

.footer-social {
width: 100%;
}

JSFiddle 演示：http://jsfiddle.net/z8vc9vq4/2/

Answer 3

从.footer-social中删除width: 50%;：

.footer-social {
/* width: 50%; */
display:block;
margin: 0 auto;
}

演示

Answer 4

将主页脚div 宽度设置为 100%