css - 如何使内容区域的颜色与包装器的颜色不同？

Question

我想做两件事:第一件事是将宽度为 1200 像素的内容区域居中。我希望导航菜单也是这个宽度。我想做的第二件事是将此内容区域的颜色更改为白色；同时允许内容区域边缘周围的背景区域(包装)保持相同的颜色。

/* BACKGROUND */

body {
 background-color: #ECF0F1;
 overflow-y: scroll;
 }

*{
 margin:0;
 padding:0;
 }

img {
 border:0;
 }

/* AREA */

#wrapper {
 margin:0 auto;
 position: absolute;
 width: 1200px;
 background:#339999;
 font-size:1.20em;
 }

/* HEADER */

#header {
 margin-top: 40px;
 height: 100px;
 width: 100%;
 }

/* PAGE */

#content {  
 min-height:400px;
 padding:23px;
 text-align:justify;
 line-height:1.5;
 }

如果你能告诉我如何设置这个内容区域和导航栏，对于我和其他希望以类似方式格式化网页的用户来说，那就太好了

谢谢!

Answer 1

#menu {
    position: fixed;
    z-index: +1;
    width: 1200px;
    background-color: #E74C3C;
    height: 100px;
    margin: 0 auto; /* add this to make it center */
    left: 0; /* to give position of fixed menu */
    right: 0; /* to give position of fixed menu */
}
#content {
    min-height: 400px;
    background-color: #fff; /* to color white your content */
    padding: 23px;
    text-align: justify;
    line-height: 1.5;
}