Почему я не вижу выход в двух div?

Question

Я не вижу никаких выходных данных в левом и правом divs.I может видеть только верхний и нижний колонтитулы, но не остальные. Я новичок, поэтому попробуйте ответить простым языком. Пожалуйста, попробуйте указать ошибку/ошибку вместо изменения кода.

#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 скрывается текст, который Вы ожидаете увидеть. Вы можете добавить margin-top: 50px в .left и .right, чтобы они очищали фиксированный заголовок.

Answer 2

Заголовок является position: fixed так что выводится из нормального потока (т.е. он не влияет на начальную позицию содержания вне его) и охватывает верхнюю часть контента, который сразу следует за ним.