如何防止网站向左右延伸？

Question

我不希望网站左右延伸，因此我想让它们保持白色，如图所示

我的CSS代码：

body {margin: 0 auto; width: 960px; background-color: olive;}
* {margin: 0; padding: 0;}
header, nav, article, section, footer {display: block;}
header {background: silver; width: 960px; height: 100px;}
nav {width: 150px; float: left;}
article {width: 806px; min-height: 650px; float: right; border-left: groove 
4px;}
footer {background: blue; width: 960px; height: 50px; clear: both;}

Answer 1

您应该将地图和绿色空间包裹在<div>内。这样，您可以将div居中，并且仅将样式应用于该区域，而不是整个页面。如果您在页面后面提供了一些HTML，将会很有帮助，这样我们就可以看到类似的样子

Answer 2

您是否尝试过像这样设置CSS？

body {margin: 0 auto; width: 100%; background-color: olive;}
* {margin: 0; padding: 0;}
header, nav, article, section, footer {display: block;}
header {background: silver; width: 100%; height: 100px;}
nav {width: 150px; float: left;}
article {width: 806px; min-height: 650px; float: right; border-left: groove 
4px;}
footer {background: blue; width: 960px; height: 50px; clear: both;}