Css 移动浏览器中的Div宽度大小调整不均匀

我正在构建一个无响应的网站，其页眉和页脚横跨整个浏览器窗口。在宽度为100%的DIV内部，我嵌套了宽度为1000px的DIV，其中包含页眉、导航和页脚内容

我的问题是，当在移动设备上查看站点时，导航和页脚被缩小到略小于站点页眉和主区域的大小

奇怪的是，导航和页脚会受到影响，而它们的页眉没有问题（这是用相同的方法构建的）

我怎样才能使每件事都按比例缩放？整个站点和所有主要分区的宽度都是1000px，那么为什么它们在移动设备上有不同的大小呢

以下是网站的URL：

下面是一个代码示例：

HTML:

---

我可以在你的网站上看到两个问题

1） 在css cass框中，div的宽度为1000，左边距为20px。所以实际的1000px+20px总计1020px超出了你的布局

2） 您的导航大小是1020px，但标题是1000px，因此当您在移动设备或小型设备（最大屏幕999px）上时，只显示1000px，这比整个站点小一点

将收割台宽度更改为1020px，这将解决问题

更具体地说

   #header-content{
       padding: 0px 10px;
       /**your present css**/
    }

---

只要更新你的#标题内容，添加填充，你的网站就固定了。

好吧，我想出来了：

---

我的问题是，我有一个容器DIV正在包装整个站点。在那个容器中，我将高度设置为100%，但没有定义宽度。我将最小宽度设置为1020px，瞧；再也没有坏掉的，断开的。设置为100%宽度的页眉和页脚div会向下缩放，但整个站点的缩放停止在1020px的宽度，因此我的所有内容都会按照我在手机和桌面上的预期方式显示。感谢所有回应的人

谢谢，我修复了盒子div，它的宽度溢出到父div之外，不幸的是，这并没有解决我的问题。将页眉和其他div的宽度更改为1020px有助于在移动浏览器上将站点扩展到全宽大小，但这并没有解决导航和页脚未按比例缩放的问题。为包装整个站点的div设置最小宽度确实解决了这个问题。您可以将代码添加到jsFiddle中，这样我们就可以使用它，看看是否可以找到解决方案吗？嗨，我昨晚确实找到了答案，因为我是一个新用户，所以直到今天我才发布答案。谢谢你的回复！然后把你的答案记下来，这样其他人就可以从中受益。几天前，我把这个解决方案变成了你的问题。选择我的答案作为解决方案将是一项诚实的工作。您告诉我更改标题，但标题并不能解决我的问题。然而，它确实间接地引导我找到最终解决我的问题的方法。我应该给你这个荣誉，我很抱歉我没有在我最后的评论。谢谢你抽出时间。

#header {
   background-color:#84B13F;
    width:100%;
    height:150px;
    border-bottom-style:solid;
     border-bottom-color:#648830;
  border-bottom-width:5px;




}

#header-content
{
  width:1000px;
  height:150px;
  text-align:center;
  margin:auto;
  background-image:url('img/top-banner.png');


}

#nav-bar
{
  width:100%;
  height:50px;
  background-color:#84B13F;
  border-bottom-style:solid;
  border-bottom-color:#648830;
  border-bottom-width:5px;

}

#nav
{
      clear:both;
      margin:auto;
      height:50px;
      width:1000px;
      text-align:center;

}

   #header-content{
       padding: 0px 10px;
       /**your present css**/
    }