WordPress menu slightly floats to the right

1 Views

I’m aligning li text to the center and making left and right padding of equal value (to have leveled background color of ective page link). 

<div class="span12" id="mn">
<ul>
<li><a id="mn1"><?php wp_nav_menu( array( 'theme_location' => 'main-menu'  ) ); ?></a></li>
</ul>
</div>

    #mn a:hover {
color: white;
background-color: #14A4FA;
text-decoration: none;}

    #mn ul li.current-menu-item {
background-color: #14A4FA;}

    #mn ul li {
display: inline;
text-align: center;
padding-right: 15px;
padding-left: 15px;
color: white;
font-weight: bold;
font-size:15px;}

the whole menu is slightly (right about 15 pxs) moved to the right

Read More

how do i fix that?

Thank you!

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. That should be because of ul tag which has indention by default. use the following and it should fix it:

    #mn ul {margin: 0; padding: 0}

    Also I don’t see any CSS rules to remove default li stylings (I mean bullet dots and stuff). You might want to use the following:

    #mn ul {list-style-type: none}