Struggling to center align the text on my webpage, I've encountered an issue where the text starts drifting to the right inside its container after each menu item selection. Frustrated, I resorted to sprinkling text-align: center; everywhere in my code, but it's just not solving the problem.
My navigation bar has a hover effect that underlines the menu item being hovered over and a different color scheme for the 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 a {
/*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 a {
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 > a {
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 all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;
}
#cssmenu > ul > li.active:after {
content: '';
display: block;
padding-top: 46px;
border-bottom: 10px solid #252425; /*-- Menu Bar Color --*/
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;
}