jquery - How to align text in menu bar? -

i've been trying text align center, can't work. text starts creep right inside box after every menu item. started annoyed , threw bunch of text-align: center; on place, don't know else here.

i have bar underlines whatever menu hovering on , different colored bar active item.

html:

<div class="menu">     <div id="cssmenu">         <ul>             <li><a href="index.html"><span>home</span></a></li>             <li><a href="about.html"><span>about</span></a></li>             <li class="active"><a href="news.html"><span>news</span></a></li>             <li><a href="gallery.html"><span>gallery</span></a></li>             <li class="last"><a href="contact.html"><span>contact</span></a></li>         </ul>     </div> </div>   

css:

/*-- menu logo --*/ .logo {     float: left;     /*background: #de5491;*/     padding: 23px 20px;     width: 406px;     height: 80px;     vertical-align: central; }  .menu {     float: right;     width: 53%; }  /*--menu--*/ #cssmenu li, #cssmenu span, #cssmenu {     /*margin: 0;*/     padding: 0;     position: relative;     text-transform: uppercase;     text-align: center; }  #cssmenu {     padding-top: 40px; }  #cssmenu:after, #cssmenu ul:after {     content: '';     display: block;     clear: both; }  #cssmenu {     color: #000;     display: inline-block;     line-height: 49px;     padding: 0 51px;     text-decoration: none;     font-weight: normal;     font-size: 1.5em;     font-family: 'bebas_neueregular';     text-align: center; }  #cssmenu ul {     /*list-style: none;*/ }  #cssmenu > ul {     /*float: left;*/     text-align: center; }  #cssmenu > ul > li {     float: left;     /*display:block;*/     text-align: center;     /*width: 24.9999%;*/     width: 19.9999%; }  #cssmenu > ul > li > {     color: #000; }  #cssmenu > ul > li:hover:after {     content: '';     display: block;     padding-top: 46px;     border-bottom: 10px solid #003; /*-- menu bar hover color --*/     -webkit-transition: .2s linear;     -moz-transition: .2s linear;     -o-transition: .2s linear;     transition: .2s linear; }  #cssmenu > ul > li.active:after {     content: '';     display: block;     padding-top: 46px;     border-bottom: 10px solid #252425; /*-- menu bar color --*/     -webkit-transition: .2s linear;     -moz-transition: .2s linear;     -o-transition: .2s linear;     transition: .2s linear; } 

it's happening because of rule:

#cssmenu {   color: #000;   display: inline-block;   line-height: 49px;   text-decoration: none;   font-weight: normal;   font-size:1.5em;   font-family: 'bebas_neueregular';   text-align:center; } 

need remove padding: 0 51px; because causes anchor wide it's container.