網格缺少在Firefox，但在Chrome瀏覽器的寬度窄

Question

JS FIDDLE

This is my page，當你在瀏覽器寬度小於960像素

第一個網格框將在Firefox被diappeared，

但它仍然顯示在Chrome上。

如何使它有兩個Chrome和Firefox

相同的行爲

的CSS

.container { 
    .categorysection { 
    margin: 0 auto; 
    max-width:960px; 
    &.grey { 
     background: #eee; 
    } 
    } 
    .grid-col { 
    text-align: center; 
    display: block; 
    float: left; 
    margin: 8px 6px; 
    } 
} 
@media screen and (max-width: 960px) { 
    .grid-col { 
     float: none !important; 
    } 
} 

Answer 1

的問題是，頁面標題，上面寫着 「財經」 。該標題向左浮動，並將第一個塊從屏幕上移開。

您可以從中取出浮動，或從柱清除浮流量：

@media screen and (max-width: 960px) { 
    .grid-col { 
     float: none !important; 
     clear: both; 
    } 
} 

Answer 2

貌似浮動：留在報頭（.container h3.heading）被打破它。刪除它，它會工作，但你必須在h3上添加一個「行」類。