标题背景直到屏幕结束才会展开

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。