标题背景仅覆盖移动设备的80％宽度

Question

在我设计的网站上，我有一个可以延伸100％页面宽度的标题，在所有浏览器中它看起来都很完美但是当我检查移动浏览器时，它只会延伸大约80％的屏幕，而其余的的内容将全宽。

#header-bg{
height: 150px;
background-color: #33363b;
border-top: 11px solid #25272a;
width: 100%;
}

该网站是http://hearthable.com，这是来自iPhone的图片，同样的事情也发生在Android上。您可以在下面的图片中看到页眉和页脚中的深蓝色背景不是全宽。

Answer 1

这是因为你把宽度：100％;它们与窗口大小有关。您的网站没有响应式设计，但可以快速解决您的问题

body{
     min-width:1180px;}

Answer 2

设置其他建议的最小宽度不是最佳选择，因为不同的设备具有不同的屏幕宽度，并且它也会根据屏幕旋转而改变。

但是，在display:inline-block;和header-bg中添加footer会解决问题。

编辑：

哦是的，width:100%和footer

中的footer-inner