How do I center this CSS menu?

Question

I have a CSS menu here that works fine, honestly. The only thing I want to change about it is the location of the tabs. They all start at the left of the page, while I'd rather have them centered at the middle. margin: auto; did not help me in this case. Can anyone look into this for me please?

http://codepen.io/anon/pen/RWrRVO

Answer 1

Your current list items float to left which is making it start from left of the menu. Reset them to none and use display: inline-block to align them in a line.

#cssmenu li {
  float: none; /* Modify */
  display: inline-block; /* Add */
  padding: 0px;
}

Updated Codepen

Answer 2

Set the margin in UL to margin auto. Put the background in #cssmennu. CSS

#cssmenu {
 position:relative;
 border: none;
 border: 0px;
 margin: 0 auto;
 background: #333333;
 padding: 0px;
 font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
 font-weight: bold;
 width: auto;
 text-align:center;
}
#cssmenu ul {
background: #333333;
height: 35px;
list-style: none;
margin: 0 auto;
padding: 0;
width:1000px;
}

Check This DEMO

Answer 3

A simple solution would be:

#cssmenu {text-align: center;}
#cssmenu ul {display: inline-block;}