firefox - ブートストラップを使用すると、Firefox でレイアウトが壊れる

Question

2 つのコンテナーがあり、各コンテナーには、アイコンとテキストをページの中央に配置する行が含まれています。ここでこの例を見ることができます: http://laurelnatale.me/newport/index.html

FireFox を使用している場合を除きます。次に、行はスパンに従っておらず、ページの左端にあります。私はしばらくこれをいじっていましたが、今はプッシュ、プル、さまざまな側面を試していますが、他のものを読んでいないかのように何も機能していませんが、コンテナにある必要があります。

コードは次のとおりです。

<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-->

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;
  }
}