中心菜单并将背景颜色扩展到包装的宽度

Question

我该如何居中这两个菜单并将每个#wrap的背景颜色扩展为#wrap的全宽？

我正在处理这样的想法，即可以告诉浏览器将div视为表单元格，即display: table; margin: 0 auto;。

这是正确的吗？有没有更好的方法来居中菜单并填充#wrap背景颜色？

这里有一个小提琴：http://jsfiddle.net/kwcp4/1/

HTML：

<div id="wrap"> 
<div id="nav"> 
<div class="wrap"> 
<ul class="menu menu-primary"> 
<li class="menu-item"><a href="http://#">Menu 1 Link 1</a></li> 
<li class="menu-item"><a href="http://#">Menu 1 Link 2</a></li> 
<li class="menu-item"><a href="http://#">Menu 1 Link 3</a></li> 
<li class="menu-item"><a href="http://#">Menu 1 Link 4</a></li> 
</ul> 
</div> 
</div> 

<div id="subnav"> 
<div class="wrap"> 
<ul class="menu menu-secondary"> 
<li class="menu-item"><a href="http://#">Menu 2 Link 1&nbsp;</a></li> 
<li class="menu-item"><a href="http://#">Menu 2 Link 2&nbsp;</a></li> 
<li class="menu-item"><a href="http://#">Menu 2 Link 3&nbsp;</a></li> 
<li class="menu-item"><a href="http://#">Menu 2 Link 4&nbsp;</a></li> 
</ul> 
</div> 
</div> 

CSS：

#wrap { 
    border: 1px solid #000; 
    margin: 0 auto; 
    width: 600px; 
    padding: 0; 
} 

.menu-primary, 
#header .menu { 
    background-color: #FE9DA6; 
    clear: both; 
    color: #fff; 
    font-size: 14px; 
    margin: 0 auto; 
    overflow: hidden; 
    width: auto; 
} 

.menu-secondary, 
#header .menu { 
    background-color: #2EA379; 
    clear: both; 
    color: #fff; 
    font-size: 14px; 
    margin: 0 auto; 
    overflow: hidden; 
    width: auto; 
} 


.menu-primary, 
.menu-secondary { 
    padding: 5px; 
} 


.menu-primary, 
.menu-secondary { 
    display: table; margin: 0 auto; 
} 

.wrap { 
    width: auto;display: table;margin: 0 auto; 
} 


.menu-primary ul, 
.menu-secondary ul, 
#header .menu ul { 
    float: left; 
    width: 100%; 
} 

.menu-primary li, 
.menu-secondary li, 
#header .menu li { 
    float: left; 
    list-style-type: none; 
} 

.menu-primary a, 
.menu-secondary a, 
#header .menu a { 
    color: #fff; 
    display: block; 
    padding: 7px 8px 6px; 
    position: relative; 
    text-decoration: none; 
} 

#header .menu a { 
    padding: 8px 15px 7px; 
} 

#header { 
    margin: 0 auto; 
    height: auto; 
    width: 100%; 
} 

Answer 1

如果我确实了解您的问题，margin: 0 auto;是以div为中心的好方法。
但对于背景颜色，是不是最好使用对背景的div的：
<div id="nav">和<div id="subnav">？

的CSS：

#nav {background-color: #FE9DA6;} 
#subnav {background-color: #2EA379;} 

DEMO