Centering content with bootstrap 3 - html

Question

I am creating a small landing page at http://www.saleshuddlegames.com
on the desktop everything is fine but when I start using tablets and smartphones, everything starts going out of alignment. I can't seem to make anything centered.
Specifically look at my .footer
<footer>
<div class="row">
<div class="col-md-4 col-sm-10 col-sm-offset-2 col-xs-12 centered">
<ul class="social navbar-nav">
<li class="social-item"><i class="fa fa-facebook fa-3x"></i></li>
<li class="social-item"><i class="fa fa-instagram fa-3x"></i></li>
<li class="social-item"><i class="fa fa-youtube fa-3x"></i></li>
<li class="social-item"><i class="fa fa-twitter fa-3x"></i></li>
</ul>
</div>
</div>
<div class="row">
<div class="copyright col-md-6 col-md-offset-4 col-sm-10 col-sm-offset-2 col-xs-12">
<p>© 2013. The Training Game is property of Sales Huddle Group, Inc.</p>
</div>
</div>
</footer>
I used a centering snippet from a previous post:
.centered {
float:none;
margin: 0 auto;
}
Any Ideas??

Answer 1

Have you tried using the text-center class from bootstrap?
I've juggled the selection of columns for the social icons, and removed them all for the copyright text.. now this looks good here at all browser sizes:
<footer>
<div class="row">
<div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-12 text-center">
<ul class="social navbar-nav">
<li class="social-item"><i class="fa fa-facebook fa-3x"></i></li>
<li class="social-item"><i class="fa fa-instagram fa-3x"></i></li>
<li class="social-item"><i class="fa fa-youtube fa-3x"></i></li>
<li class="social-item"><i class="fa fa-twitter fa-3x"></i></li>
</ul>
</div>
</div>
<div class="row">
<div class="copyright text-center">
<p>© 2013. The Training Game is property of Sales Huddle Group, Inc.</p>
</div>
</div>
</footer>