Can't get navbar centered on page - css

Question

I'm trying to get my navbar centered on my page with the edges of navbar going for entire length of browser window. I cannot figure this out. I think it has something to do with the float:left of the individual nav items. I want this nav bar to be orange background across entire browser window, but the actual nav items to be centered on page. I've copied code below and working demo below that.
<div id="nav-wrapper">
<div id="navmenu">
<ul class="nav" >
<li>About
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Members & Groups
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Meetings & Events
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
</ul>
<!-- hp navigation end -->
</div>
</div>
#nav-wrapper {
width:100%;
background: #ff6633;
margin 0 auto;
}
#navmenu{
margin 0 auto;
width:100%;
}
#navmenu ul {
list-style-type: none;
padding: 0;
}
.nav li > a {
background: #ff6633;
color: white;
width: 137px;
}
.nav > li > a {
display: block;
height: 100%;
padding: 0px;
color: #000000;
text-decoration: none;
text-align: center;
line-height: 32px;
outline: none;
border-right: 1px solid #D6D3D3;
}
.nav > li:hover > a {
color:#333;
}
.nav > li {
padding: 0;
height: 30px;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: -0.5px;
font-size: 14px;
}
.nav li {
float: left;
}
.nav li > ul {
position: absolute;
display: none;
border-bottom: 0;
width: 220px;
z-index: 9999;
}
.nav li > ul > li > a {
text-decoration: none;
color: #0f2992;
display: block;
padding:5px 3px 5px 10px;
text-indent:-7px;
}
.nav li:hover > ul {
display: block;
}
http://codepen.io/trevoray/pen/KwJPLO

Answer 1

#navmenu{
margin 0 auto;
width:100%;
}
#navmenu ul {
list-style-type: none;
padding: 0;
text-align:center
}
.nav li > a {
background: #ff6633;
color: white;
width: 137px;
}
.nav li > ul > li {
width:100%;display:inline-block
}
.nav > li > a {
display: block;
height: 100%;
padding: 0px;
color: #000000;
text-decoration: none;
text-align: center;
line-height: 32px;
outline: none;
border-right: 1px solid #D6D3D3;
width:100%;
}
.nav > li:hover > a {
color:#333;
}
.nav > li {
padding: 0;
height: 30px;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: -0.5px;
font-size: 14px;
position: relative;
width: 32%;
}
.nav li {
display:inline-block
}
.nav li > ul {
position: absolute;
display: none;
border-bottom: 0;
width: 100%;
z-index: 9999;
list-style:none;
text-align: left !important;
}
.nav li > ul > li > a {
text-decoration: none;
color: #0f2992;
display: block;
padding:5px 3px 5px 10px;
text-indent:-7px;
width:100%;
box-sizing: border-box;
}
.nav li:hover > ul {
display: block;
}
<div id="nav-wrapper">
<div id="navmenu">
<ul class="nav" >
<li>About
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Members & Groups
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Meetings & Events
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
</ul>
<!-- hp navigation end -->
</div>
</div>
try this :http://jsfiddle.net/au07b2r3/3/
i remove float left from li ..and set display : inline-block