CODEWITHSUNDEEP
htmlcss
Chris Ng
Chris Ng

Reputation: 13

White space appears around icon bar

I'm a beginner at HTML/CSS, so forgive me for any obvious mistakes. I am attempting to create a responsive social media footer using Font Awesome icons and Bootstrap. However, white spaces appear at the sides of the footer. Any idea of how to remove?

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>

Upvotes: 1

Views: 1498

Answers (4)

krrr25
krrr25

Reputation: 679

Set main footer div width as 100%

Upvotes: 0

trevorp
trevorp

Reputation: 1168

Remove the width: 50%; from .footer-social:

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

Demo

Upvotes: 0

Sherman Hui
Sherman Hui

Reputation: 998

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

The footer bar seems to only be at width 50%, try changing it to 100%, that should have it span the whole width of the page.

Upvotes: 3

Miguel
Miguel

Reputation: 20633

Expand the footer full width:

.footer-social {
  width: 100%;
}

JSFiddle demo: http://jsfiddle.net/z8vc9vq4/2/

Upvotes: 1

Related Questions