メニューバーブレークポイント後の応答性が緩和

Question

ブラウザのウィンドウサイズが900pxより小さい場合、メニューバーのサイズが正しく調整されませんでした。
バーの幅が広すぎ、一部のコンテンツがオフスクリーンになり、水平スクロールバーも表示されます。

私は今このメニューバーを2日間稼働させようとしました。私は問題を指摘することもできません。私は私の心に来たすべてを試しました。

私はエラーはあなたがスペースがあまりにもあれば、これは新しい行にアイテムを移動するフレキシボックス、ラップを使用して、残りの下に各項目を追加することができます

@media screen and (min-width:900px) 

here is a pen with all the code because I thought it's too much code to paste here

Answer 1

内のどこかにあると思います小さな

.site-nav>ul { 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    align-items: stretch; 
    flex-wrap:wrap; 
} 

codepen

あなたも、私は親指をしましたが、そのが原因で15未満の担当者を示すだけでなく、小さなデバイス上でオーバーフローを防ぐために、メニューの一番上に

@media (max-width :800px){ 
    .site-nav { 
    z-index: 999999999999999999; 
    margin-top: 25px; 
    }