Using bootstrap, layout is breaking in Firefox - firefox

Question

I have two containers, each container containing rows that center the icons and text on the page. You can see example of this here: http://laurelnatale.me/newport/index.html
Unless you are using FireFox. Then the rows are not following the spans and are to the far left of the page. I have been fiddling with this for a while, now trying push, pull, different asides, nothing is working, as if it is not reading anything else but that they should be in the container.
Here is the code:
<div class="container">
<div class=" row minipush">
<div class="span2 offset2">
<div class="bigIcon"><a class="skylink" href="skills.html">Sk</a></div>
<div class="hitext">skills</div>
</div>
<div class="span4">
<div class="bigIcon"><a class="skylink" href="#">Pr</a></div>
<div class="hitext">projects</div>
</div>
<div class="span2 push2">
<div class="bigIcon"><a class="skylink" href="#">Tk</a></div>
<div class="hitext">toolkit</div>
</div>
</div><!--row end-->
</div><!--container end-->
<div class="container">
<div class=" row minipush2">
<div class="span3 offset4">
<div class="email">
<img class="emailicon" src="images/email.png" alt="email Laurel Natale">
<div class="hitext mail">email</div>
</div>
</div>
<div class="span3 pull2">
<div class="twitter">
<img class="twittericon" src="images/twitter.png" alt="Follow Laurel Natale on Twitter">
<div class="hitext tweet">twitter</div>
</div>
</div>
</div><!--row end-->
</div><!--container end-->
Here is the CSS:
.minipush2 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin-top: 5%;
#include breakpoint(baby-bear) {
padding-left: 15%;
margin-top: 10%;
}
}
.hitext {
padding-bottom: 1em;
}
.mail {
margin-left: - 12em;
#include breakpoint(mama-bear) {
margin-left: -8em;
}
#include breakpoint(baby-bear) {
margin-left: 1em;
}
}
.tweet {
margin-left: - 12em;
#include breakpoint(mama-bear) {
margin-left: -8em;
}
#include breakpoint(baby-bear) {
margin-left: 1em;
}
}