Sass and Compass Centering Issues

Question

I'm still learning Sass, Compass and Susy so please bear with me. I'm having a little problem centering my list in the footer. It keeps floating left. Here's the code I am working with:

<footer>
<ul class="social">
    <li><a href="#"><i class="fa fa-facebook-square fa-3x"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter-square fa-3x"></i></a</li>
    <li><a href="#"><i class="fa fa-instagram fa-3x"></i></a></li>
</ul>
<div class="copyright">&copy;2104 meylorodriguez.com<br />All Rights Reserved</div>
</footer>

and here's my (s)CSS:

footer {

    ul.social {
        @include horizontal-list;
        background: $skyblue;
        padding: 4%;

        li a {
            color: $white;
        }       
    }

    .copyright {
        padding: 4%;
        text-align: center;
        font-family: 'Arbutus Slab', serif;
        font-size: small;
        color: $gray;
    }

}

I simply need to center the three social media icons in the footer.

Answer 1

The problem is that horizontal-list adds float:left to your <li>s. So, you always have the list on the left.

There is a method to prevent that. If you set display: inline-block to the <ul> and set the background and alignment to the <footer> you'll get that.

Try it:

footer {
  padding: 4%;
  background: blue;
  text-align: center;

  ul.social {
      @include horizontal-list;
      display: inline-block;

      li a {
         color: white;
      }       
  }

  .copyright {
    padding: 2% 4%;
    text-align: center;
    font-family: 'Arbutus Slab', serif;
    font-size: small;
    color: gray;
  }
}

Hope it helps.

Regards.

Edit: to test it I have added my custom color values, you have to change it to yours