Chrome margin differs from ie and ff

Question

Everything looks fine on firefox and ie, but chrome shows the menu about twice lower. Live link here http://soloveich.com/project2/

<div class="row">
<div class="col-lg-12" id="desc">
<?php bloginfo('description'); ?>
</div>
</div>


<div class="row">
             <div class="col-lg-12" id="mn">
                <ul>
<li><?php wp_nav_menu( array( 'theme_location' => 'main-menu'  ) ); ?></li>
</ul>
             </div> 
</div>

css

#desc {
margin-top: 15px;
text-align: center;
}

#mn {
margin-top: 15px;
padding-bottom: -5px;
text-align: center;
border-bottom-style: solid;
border-bottom-width: 2px;
}
#mn ul {
list-style-type: none;
margin: 0;
    padding: 0;
}
#mn ul li {
display: inline;
text-align: center;
padding-right: 5px;
}

How do i fix that?

Answer 1

Change the ul with the single li to a div and things settle down a bit.

It's not good practice to use lists when you don't need them. For one thing, it makes for needlessly messy code. For another, it makes page navigation strange for screen-reader users.

That said, I'm not sure why Chrome puts the single li and the child div on separate lines. You can probably get that fixed by fiddling with display states.