html - Unable to center a div containing a menu.. So confused -

html - Unable to center a div containing a menu.. So confused -

i've been trying hr menu centered.

i've tried google has suggested me no avail.

can tell me obvious thing doing wrong please?

here's html:

<header> <div class="wrap-header zerogrid"> <div id="logo"><a href="#"><img src="./images/logonew.png"/></a></div> <nav> <div class="wrap-nav"> <div class="menu"> <ul> <li><a href="index.html">home</a></li> <li><a href="food.html">our food</a></li> <li><a href="drinks.html">our bar</a></li> <li><a href="gallery.html">gallery</a></li> <li><a href="contact.html">contact us</a></li> </ul> </div> <div class="minimenu"><div>menu</div> <select onchange="location=this.value"> <option></option> <option value="index.html">home</option> <option value="food.html">our food</option> <option value="single.html">our bar</option> <option value="gallery.html">gallery</option> <option value="contact.html">contact us</option> </select> </div> </div> </nav> </div>

and here's css:

header {background:#e7dcd5; border-bottom: 0px solid #e7dcd5; background:url(../images/speckledbg.jpg) repeat scroll 0 0; text-align: center;} header .wrap-header{height: 150px; text-align: center;} header #logo {position:absolute; top: 15px; padding:5px; width: 100%; margin: 0 auto;} nav {width:100%;text-align:center; height:37px; display:block; margin-left:auto;margin-right:auto;} nav .wrap-nav{position:absolute; top:115px; height: 37px; background:#e7dcd5; text-align:center;} .menu ul {list-style: none;margin: 0;padding: 0; text-align:center; } .menu ul li {position: relative;float: left;padding: 6px 5px 0px 5px;} .menu ul li:hover {background:#b9aaa0;} .menu ul li {font-size: 18px; line-height:14px;color: #3e3223;display: block;padding: 6px 10px;margin-bottom: 5px;z-index: 6;position: relative;} .menu ul li:hover {color:#ffffff;} .minimenu{display:none;} .minimenu{position: relative;margin: 0px;background:#333333;} .minimenu div{overflow: hidden;position: relative;font: 18px/37px 'pt sans narrow' !important;color: #fff;text-align:center;text-transform:uppercase;font-weight:bold;} .minimenu select{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%; opacity: 0;filter: progid:dximagetransform.microsoft.alpha(opacity=0); cursor: pointer;}

here's jsfiddle

thanks in advance

you need specify width .wrap-nav , assign display:inline-block menu , it's done.

you can see working here: http://jsfiddle.net/gfb8k/5/

html css