css - Firefox 水平リストスクロール CSS

Question

縦ではなく横に表示するように設定されたリストがあります。また、画面全体の高さに設定されています（それが違いを生むかどうかはわかりません）。リストは Chrome と Safari では正しく表示されますが、Firefox では最初の項目しか表示されません。更新すると、すべての項目が表示されることがありますが、縦方向の形式でのみ表示されます。いくつかの修正を試みましたが、どれもうまくいかないようです。誰かがこれに光を当てることができれば幸いです。

HTMLは次のとおりです。

<ul class="project">

<li class="item">
<div class="overlay">
<section class="img-info">
  <h1>Ro, 2012</h1>

</section>
</div>
<img src="01.jpg" />
</li>

<li class="item">
<div class="overlay">
<section class="img-info">
  <h1>Jonathan, 2012</h1>

</section>
</div>
<img src="02.jpg" />
</li>
</ul>

CSS は次のとおりです。

article.projects {
    height:100%;
    float:none;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;
}

article.projects ul.project {
    height:100%;
    width:auto;
    display:inline-block;
    float:left;
    padding-left:72px;
}

article.projects ul.project li.item {
    height:100%;
    width:auto;
    min-width:300px;
    float:left;
    padding-bottom:0px;
    padding-right:1px;
}

サイトはここにあります - http://jennaegarrett.com/

サイトはレスポンシブなので、コードに入ると、関連する css がファイルの一番下にあります。