なぜ2つのdivの出力が表示されないのですか？

Question

私の左と右のdivsの出力を見ることができません。私はヘッダーとフッターだけが残ります。私は初心者ですので、簡単な言葉で答えてみてください。 コードを変更するのではなく、エラー/バグを指摘してください。

#header { 
 
    height: 50px; 
 
    width: 1600px; 
 
    border: 2px solid red; 
 
    border-radius: 5px; 
 
    background-color: Aquamarine; 
 
    position: fixed; 
 
    z-index: 1; 
 
} 
 
.left { 
 
    height: 500px; 
 
    width: 700px; 
 
    border: 2px solid green; 
 
    border-radius: 5px; 
 
    background-color: Lavenderblush; 
 
    float: left; 
 
} 
 
.right { 
 
    height: 500px; 
 
    width: 700px; 
 
    border: 2px solid blue; 
 
    border-radius: 5px; 
 
    background-color: lightblue; 
 
    float: right; 
 
} 
 
#footer { 
 
    height: 50px; 
 
    width: 1600px; 
 
    border: 2px solid black; 
 
    border-radius: 5px; 
 
    background-color: Yellow; 
 
    clear: both; 
 
} 
 
h1 { 
 
    text-align: center; 
 
    margin: auto; 
 
    color: Blue; 
 
    font-family: Verdana; 
 
} 
 
h4 { 
 
    text-align: center; 
 
    margin: auto; 
 
    color: Blue; 
 
    font-family: Verdana; 
 
}

<div id="header"> 
 
    <h1>My Resume</h1> 
 
</div> 
 
<div class="left"> 
 
    <p>Hello how are u</p> 
 
</div> 
 
<div class="right"> 
 
    <p>some random data here</p> 
 
</div> 
 
<div id="footer"> 
 
    <h4>This is the footer</h4> 
 
</div>

Answer 1

私はこのコードをロードしていないが、おそらく、50の高さであなたの固定ヘッダは、あなたが見て期待しているテキストを隠しています。 .leftと.rightにmargin-top：50pxを追加して、固定ヘッダーをクリアすることができます。

Answer 2

ヘッダーは通常の流れから取り除かれます（つまり、それは外側のコンテンツの開始位置に影響しません）。は、それに続く内容の先頭であるをカバーします。