如何修复此CSS并使菜单水平居中？

我试图删除菜单中“联系我们”链接右侧的垂直线，然后将整个菜单栏居中。下面是代码（底部是一个JSFIDLE链接）。提前感谢您的帮助：）

HTML:

添加css样式

#menu_container {
    margin:0;
    padding: 0;
    padding: 0 20px;
    background: #CC6600;
}

#menu_container ul li:last-child a{
    border: none;
}

---

您可以使用

上的CSS规则

显示：表格

，以及

上的

显示：表格单元格

。这将使菜单完全适合水平空间。我删除了

display:inline

并将

display:block

添加到

演示：

我感谢所有有益的答复。我发现您的解决方案是最优雅、最适用的。谢谢
body{
     margin:15px 0 15px 0;
     padding:0;
     line-height: 1.7em;
     text-align: center;
     font-family: verdana, arial, sans-serif;
     font-size: 75%;     
}


#page_wrapper {
     width: 890px;
     border:1px solid #8A837D;
     background-color: #FFFFFF;
     margin: 0 auto;
     padding:0;
     text-align: left;
}

#header {
     background: #999E8A url('../img/#.jpg') top right no-repeat;
     height: 135px;
     padding-top:25px;
     margin:0;
}


#content_wrapper {
     float: left;
     width: 100%;
}

.inner_padding {
     margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
}

.page_padding {
     margin: 15px; /*Margins for inner DIV inside each column (to provide padding)*/
}


#menu_container {
     margin:0;
     padding: 0;
}

#menu_container ul {
     padding-left: 0;
     margin: 0;
     background-color: #CC6600;
     color: White;
     float: left;
     width: 100%;
     font-family: verdana, arial, helvetica, sans-serif;
     font-size: 1.2em;
     font-weight: bold;
}

#menu_container ul li { display: inline; line-height: 1em;}

#menu_container ul li a {
     padding: 1em 1em 1em 1em;
     background-color: #CC6600;
     color: White;
     text-decoration: none;
     float: left;
     border-right: 1px solid #fff;
}

#menu_container ul li a:hover {
     background-color: #FF9933;
     color: #fff;
}

 .spacer {clear:both;}

#menu_container {
    margin:0;
    padding: 0;
    padding: 0 20px;
    background: #CC6600;
}

#menu_container ul li:last-child a{
    border: none;
}

edit css like this

  #menu_container ul {
padding-left: 0;
margin: 0 auto;
background-color: #CC6600;
color: White;
width:92%;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
 }

#menu_container ul li:last-child a {
padding: 1em 1em 1em 1em;
background-color: #CC6600;
color: White;
text-decoration: none;
float: left;
border-right: none;
 }