Html 为什么页眉和内容没有达到正文宽度

我在下面的代码中遇到了一个奇怪的情况，我的

正文

宽度设置为

980px

，标题和内容宽度设置为

100%

，所以它们应该在整个屏幕上伸展，但在firefox中它们缺少几个像素，而在chrome中它们刚好达到一半，奇怪的是页面的主体覆盖了整个屏幕，我通过设置

主体的
背景：黑色
，然后整个页面变为黑色，然后标题和内容如何低于
宽度：100%
。但是这段代码在cssdesk上运行良好，所以我的浏览器有什么问题。我的屏幕分辨率是1366x768


正文{
宽度：980px；
保证金：0；
背景色：#000；
}
.标题{
颜色：#fff；
保证金：0；
宽度：100%；
高度：60px；
背景色：#F23F21；
}
#容器{
宽度：100%；
}
.一{
高度：200px；
浮动：左；
边框：1px纯红；
宽度：25%；
框大小：边框框；
}
.二{
高度：200px；
显示：内联块；
边框：1px纯蓝色；
框大小：边框框；
宽度：50%；
}
.三{
高度：200px；
浮动：对；
边框：1px纯绿色；
框大小：边框框；
宽度：25%；
}

这是标题
身体没有伸展以填满屏幕。对于如何在主体元素上处理背景颜色，只有一些特殊规则（它用于为视口本身着色）

身体就是你给它的宽度。该宽度比浏览器窗口窄

其他所有内容都限制在其中。
不要固定身体的宽度，身体内部创建一个容器div

我已经修改了你的代码检查这个



主体{}
.集装箱{
宽度：980px；
保证金：0；
背景色：#000；
}
.标题{
颜色：#fff；
保证金：0；
宽度：100%；
高度：60px；
背景色：#F23F21；
}
#容器{
宽度：100%；
}
.一{
高度：200px；
浮动：左；
边框：1px纯红；
宽度：25%；
框大小：边框框；
}
.二{
高度：200px；
显示：内联块；
边框：1px纯蓝色；
框大小：边框框；
宽度：50%；
}
.三{
高度：200px；
浮动：对；
边框：1px纯绿色；
框大小：边框框；
宽度：25%；
}
这是标题
关于正文尺寸/颜色，请参见此处的讨论：谢谢，但您能否解释一下，人们认为980px是页面宽度的最佳选择，他们是在谈论设置内容的宽度，而不是正文？他们是在谈论内容的宽度。