Заголовок фона не не расширяется до конца экрана

Question

Это скриншот с веб-сайта. Компьютерные браузеры показывают очень хорошо, но мобильные опера и другие браузеры показывают это.

Что мне не хватает?

#header{ 
    background: -webkit-linear-gradient(180deg,#307FB7, #084F81); 
    background: -moz-linear-gradient(180deg,#307FB7, #084F81); 
    background: -ms-linear-gradient(180deg,#307FB7, #084F81); 
    background: -o-linear-gradient(180deg,#307FB7, #084F81); 
    background: linear-gradient(180deg,#307FB7, #084F81); 


    -webkit-box-shadow: 0 1px 2px #000000; 
    -moz-box-shadow: 0 1px 2px #000000; 
    box-shadow: 0 1px 2px #000000; 
} 

#header-wrapper{ 
    height: 80px; 
    margin: auto; /* Centralize blue bar */ 
    width: 996px; /* Fix the size of blue bar */ 
} 

Answer 1

ширина Набор в #header-wrapper от "width: 996px;" к "width: 100%;"

Таким образом, ваш заголовок обертка продлит всю ширину страницы

Answer 2

пока не могу комментировать, но почему у вас width:996px;?

Если вам это нужно, что ширина в браузерах, используйте max-width: 996px; и width:100%;

Таким образом, в мобильном баре будет 100% от экрана, но в браузере это будет 100%, пока не достигнет макс 996px ,