CSS Drop-down Navigation Bar Will Not Center - css

Question

I realize this question has been asked over and over again, but I simply cannot figure out how to fix the problem. I'd like to center my drop-down navigation bar, the headers or main elements, not the child elements.
Here's the JSFiddle link :
http://jsfiddle.net/02zoptrf/3/
#mbwnavbar {
background: #ffffff;
width: 800px;
color: #000000;
margin: 0 auto;
padding: 0;
position: relative;
border-top:0px solid #transparent;
height:35px;
}
#mbwnav {
text-align: center
margin: 0 auto;
padding: 0;
}
#mbwnav ul {
float: left;
list-style: none;
margin: 0 auto;
padding: 0;
}
#mbwnav li {
list-style: none;
margin: 0 auto;
padding: 0;
display:inline;
border-left:0px solid #333;
border-right:0px solid #333;
height: 35px;
}
#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
color: #000000;
display: inline-block;
font:normal 11px Century Gothic, sans-serif; margin: 0;
font-weight: bold;
text-align: left;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbwnav li a:hover, #mbwnav li a:active {
background: #ffffff;
color: #fdeae9;
display: block;
text-decoration: none;
margin: 0 auto;
padding: 9px 12px 10px 12px;
}
#mbwnav li {
float: left;
padding: 0;
}
#mbwnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 100px;
margin: 0 auto;
padding: 0;
}
#mbwnav li ul a {
width: 100px;
}
#mbwnav li ul ul {
margin: -25px 0 0 161px;
}
#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav li.sfhover ul ul ul {
left: -999em;
}
#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {
left: auto;
}
#mbwnav li:hover, #mbwnav li.sfhover {
position: static;
}
#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
background: #ffffff;
width: 120px;
color: #000000;
display: block;
font:normal 11px Century Gothic, sans-serif;
margin: 0 auto;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:0px dotted #333;
}
#mbwnav li li a:hover, #mbwnavli li a:active {
background: #ffffff;
color: #fdeae9;
display: block; margin: 0 auto;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
Anyone have any ideas? Sorry for being such a bother, I realize this question is quite popular, but I've spent a few days working on this and I can't figure anything out.
Thank you!

Answer 1

An easy way to do this is with display: table on the container. Here's a demo, with some minor tweaks just to your CSS:
http://codepen.io/pageaffairs/pen/zvJmG

Answer 2

Try moving the text-align: center to #mbwnavbar and add display: inline-block to #mbwnav. text-align: center can center inline-blocks.
Example:
http://codepen.io/anon/pen/DGtfo

Answer 3

http://jsfiddle.net/VerdeletG/02zoptrf/7/
#mbwnav {
margin:auto;
display:table;
}
display table works extremely well with margin auto. I tweaked your code and removed unecessary lines as well while I was at it! hope it works!!!

Answer 4

I have been trying to fix this issue with the text not centering on Chrome mobile browsers and I have an answer and it worked after trying EVERYTHING!
"text-align:center;" does not work)
You dont need all that ridiculous code
Try this:
On a dropdown (select) CSS code the element with this
text-align-last: center;
All my dropdowns are now centered. I guess that code works because the browser is looking at the previous span but who knows it works!