Html 在css中以全宽度运行标题背景

我是一名网络设计新手，我在3天前创建了我的网站，经常遇到一些问题，所以我删除了我的旧脚本并编写了一个新脚本。现在，新的一个在顶部的整个宽度上遇到了这个问题。 我的问题：！[在此处输入图像描述][1]

正如您在我的半尺寸浏览器的右上角所看到的，出现了一个“空白”。但在全尺寸的浏览器窗口中，没有空间发生…（窗口越小，“白色”空间越大

我的html脚本和CSS脚本将以小提琴的形式出现在这里：

我的问题是，为什么会出现这种“白色”空间，以及这种“白色”空间是如何产生的？ 请注意：我已经在脚本领域找到了一个解决方案，关于如何拥有一个完整的空间，但我找不到并回答了其中的差异，以及为什么和如何发生这种情况。 ps：我真的很想得到一份答复。 在以下方面向ASIL表示亲切的问候

：

#top
{   
    width:100%;
}

---

宽度：100%使顶部分区延伸到浏览器宽度。因此，如果您的浏览器宽度小于980px，则它将延伸到该宽度。因此，假设浏览器宽度为600px，则它将自动延伸到600px。左侧380px将是空白。由于包装比顶部宽，因此会出现一个滚动条将被添加到页面底部。当前视图的顶部已完全拉伸到浏览器宽度，而包装器溢出到浏览器宽度。

那么我如何设置它以使顶部的宽度得到完整的和调整大小的宽度？或者更改

#顶部{width:980px}

或者

#包装器{width:100%}

如果将整个设计放在一个#MainContainer分区中，并将#MainContainer设置为一个固定的宽度，例如1007px（大多数屏幕的最佳尺寸），效果会更好.hmm不起作用..好吧，我会这样做：我会把我的#top作为一个儿童选择器，并将这个新的div设置为与我的#top背景img相同的背景颜色。我希望这会起作用。再次感谢你的帮助，我真的很感激