Weird CSS3 margin issue

Question

В настоящее время я просматриваю учебное видео на веб-сайте Team Treehouse, и есть эта странная проблема, которую я не могу понять.

Я загрузил сайт практики здесь: http://www.oneniceday.com/about.html

В принципе, я пытаюсь добавить 10% верхний предел на весь раздел ниже горизонтальной навигации панель ссылок.

Так, в соответствующем ID, я добавил маржу 10% к началу:

#wrapper 
{ 
max-width: 940px; 
margin:10% auto; 
padding:0 0%; 
background-color:black; 
} 

Однако, по какой-то странной причине, хотя запас верхнее значение применяется к классу #wrapper, кажется, браузер каким-то образом применяет его к классу H1, и теперь класс H1 имеет 10% -ный запас вверху! (вот почему вы видите большой пробел выше зеленого ряда, если вы смотрите на мой сайт)

Что в этом плохого?

Tks!

Answer 1

Проблема возникает из-за того, что header имеет float: left;, и нет никакой причины для того, чтобы header имел это свойство.

Если вы добавили поплавок, чтобы зафиксировать запас h1 вы могли бы вместо того, чтобы добавить этот «clearfix»:

header::before { 
    content: ''; 
    display: table; 
    clear: both; 
}