Keeping divs(social icons) centered when removing some - html

Question

I have some social icons on my wordpress theme I am working on, and I am trying to add the ability to select which icons to use. The problem is that when I remove icons, it automatically will mess up the alignment, because I use an offset on the first icon, and an extra class on another. Now I figured out a way around this(although not working as of yet), but after working on it I realized it is a little rediculous for me to mask bad css with a gigantic PHP function to help me work with the the problematic css. This approach can be seen here: https://wordpress.stackexchange.com/questions/126611/cannot-seem-to-get-a-value-or-key-from-array
So I am wondering if anyone could help me fix my social icons so that if I remove them it will not move their alignment from the center. So it always looks centered and even. Here is a JS fiddle of the icons: http://jsfiddle.net/g2SC4/
Here is a look at the HTML. In total there is 6 icons:
<!-- start: social icon -->
<div id="social-icons">
<div class="section-wrapper section-icon social-icon">
<div class="container">
<div class="row">
<div class="social-icon-phone clear-phone">
<div class="span1 offset3">
<div class="flip-container">
<div class="flipper">
<div class="front">
<div class="flip-a">
<i class="icon-facebook icon-2x"></i>
</div>
</div>
<div class="back">
<div class="flip-b facebook">
<span class="icon-back"><i class="icon-facebook icon-2x"></i></span>
</div>
</div>
</div>
</div>
</div>
<div class="span1">
<div class="flip-container">
<div class="flipper">
<div class="front ">
<div class="flip-a">
<i class="icon-twitter icon-2x"></i>
</div>
</div>
<div class="back">
<div class="flip-b twitter">
<span class="icon-back"><i class="icon-twitter icon-2x"></i></span>
</div>
</div>
</div>
</div>
</div>
<div class="span1">
<div class="flip-container">
<div class="flipper">
<div class="front ">
<div class="flip-a">
<i class="icon-google-plus icon-2x"></i>
</div>
</div>
<div class="back">
<div class="flip-b google">
<span class="icon-back"><i class="icon-google-plus icon-2x"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="social-icon-phone clear-phone">
<div class="span1">
<div class="flip-container">
<div class="flipper">
<div class="front ">
<div class="flip-a">
<i class="icon-github icon-2x"></i>
</div>
</div>
<div class="back">
<div class="flip-b github">
<span class="icon-back"><i class="icon-github icon-2x"></i></span>
</div>
</div>
</div>
</div>
</div>
<div class="span1">
<div class="flip-container">
<div class="flipper">
<div class="front ">
<div class="flip-a">
<i class="icon-pinterest icon-2x"></i>
</div>
</div>
<div class="back">
<div class="flip-b pinterest">
<span class="icon-back"><i class="icon-pinterest icon-2x"></i></span>
</div>
</div>
</div>
</div>
</div>
<div class="span1">
<div class="flip-container">
<div class="flipper">
<div class="front ">
<div class="flip-a">
<i class="icon-linkedin icon-2x"></i>
</div>
</div>
<div class="back">
<div class="flip-b linkedin">
<span class="icon-back"><i class="icon-linkedin icon-2x"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- end: social icon -->
</div>

Answer 1

Here is the solution.
Remove the class offset3 from the first icon(span) and the following CSS:
.social-icon-phone.clear-phone {
display: inline-block;
}
#social-icons .row {
text-align: center; // remove margin left -30px
}