图标栏

Question

我是HTML / CSS的初学者，请原谅我任何明显的错误。我正在尝试使用Font Awesome图标和Bootstrap创建一个响应式社交媒体页脚。但是，页脚的两侧会出现空白区域。知道如何删除？

White squares appearing 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>

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

从width: 50%;：

中删除.footer-social

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

Demo

Answer 4

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