图标栏周围出现空白答案

【问题标题】：White space appears around icon bar图标栏周围出现空白
【发布时间】：2017-08-09 02:04:48
【问题描述】：

我是 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>

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

很好的答案，不仅仅是通过解释它为什么起作用来给出解决方案。
感谢您的回答！帮助很大；不知道为什么我把 50% 放在首位:)
多么好的答案

【解决方案2】：

将页脚全宽：

.footer-social {
  width: 100%;
}

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

【讨论】：

【解决方案3】：

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

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

Demo

【讨论】：

【解决方案4】：

设置主页脚 div 宽度为 100%

【讨论】：