h1ラッピングのテキストはなぜですか？

Question

私はシンプルなウェブサイトを構築していますが、h1タイトルがラッピングされていることを把握できません.Navはそれに触れておらず、何も干渉していないように見えます。私は空白を宣言しました。しかし、それはまだラップ、誰もこれを引き起こしていると私はそれを修正することができます知っていますか？フィドルで私のために正常に動作し

https://jsfiddle.net/xsqk3xk4/1/

@media screen and (min-width: 400px){ 
    header{ 
     height: 120px; 
     display: flex; 
     justify-content: space-between; 
    } 
    header h1{ 
     margin: 0 0 0 8%; 
     font-size: 2em; 
     align-self: flex-start; 
     white-space: nowrap; 
    } 
    header nav{ 
     display: block; 
     align-self: flex-end; 
    } 
    nav ul{ 
     display: flex; 
     justify-content: flex-end; 
     margin: 0 8% 0 0; 
    } 
    nav li{ 
     border-radius: 8px; 
     padding: 5px; 
     margin: 4px 1%; 
    } 
    footer nav{ 
     display: none; 
    } 
} 

Answer 1

。とにかく、ヘッダの余白を取り除くと、h1は正しく表示されます。

header h1{ 
    margin:0; 
... 
}