title: CSS Drop-down Navigation Bar Will Not Center
body: <p>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. </p>
  
  <p>Here's the JSFiddle link : </p>
  
  <p><a href="http://jsfiddle.net/02zoptrf/3/" rel="nofollow">http://jsfiddle.net/02zoptrf/3/</a></p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Thank you!</p>