заголовок опускается только в firefox

По какой-то причине мой заголовок проталкивается в firefox. В сафари и хроме работает нормально. Я попытался сделать положение заголовка абсолютным, но он все равно смещается вниз, когда он должен всплывать в левый угол своего родителя - это не так. Так что это навело меня на мысль, что опускают корпус, а не головку.

поэтому я начал исследовать свое положение фонового изображения в моем теге body, но я пробовал все виды комбинаций позиционирования изображения без везения, а также

.home-body {
    position: relative; 
    top: 0; left: 0; 
}

Я пробовал :contain вместо :cover - не сработало.

Тогда я думал, что это связано с высотой: авто, но нет.

Я экспериментировал с главной страницей, хотя это происходит на всех страницах.

вот сайт:

http://lindseypod.com/v10/

тег моего тела:

body {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 100;
    padding: 0;
    margin: 0;
}

У меня есть body.home-страница с фоновым изображением со свойством обложки css:

.home-page {
   background: url(images/home_2.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover; 

}

тогда у меня есть тег заголовка с элементами внутри него:

header {
    width: 100%;
    background-color: rgba(255,255,255,0.8);    
}

.header-content находится внутри заголовка:

.header-content, 
.footer-content, 
.content, 
.bars-content  {
    width: 96%;
    height: auto;
    margin: 0 auto;
    color: rgba(255,255,255,1);
    max-width: 960px;
}