Добавление движений заголовка Div

Question

Всякий раз, когда я добавляю заголовок ко второму div в своем заголовке, он перемещается вниз. Я видел несколько ответов на эту проблему, но до сих пор никто не работал, так что это либо другое, либо я делаю это неправильно.

Это мой заголовок

<div id='header' class='full'> 
    <div id='headerhead' class='full'></div> 
    <div id='headertext' class='full'><h1>Protocol Grean</h1></div> 
    <div id='headerbuttons'></div> 
</div> 

Это CSS для четырех дивов

#header { 
    height: 200px; 
    background-color: green; 
} 
#headerhead { 
    height: 50px; 
    background-color: darkgreen; 
} 
#headertext { 
    padding-left: 50px; 
    height: 100px; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 20px; 
    text-transform: uppercase; 
    background-color: pink; 
} 
#headerbuttons { 
    height: 50px; 
    background-color: blue; 
} 

Что мне нужно добавить, чтобы сделать HeaderText не плывет? Вертикальное выравнивание, кажется, ничего не делает для меня, и положение абсолютное просто заставляет HeaderButtons уходить.

Answer 1

Вы должны удалить margin из вашего h1 элемента:

#headertext h1 { 
    margin: 0; 
}