Compatibility Issue with HTML list in Chrome

Question

I have a compatibility issue with IE(11) and Chrome. I have a horizontal menu at the top of my webpage. In IE the (correct) menu looks like this:

But in Chrome it renders like follows:

The HTML looks like this:

        <nav>
            <!-- nav menu -->
            <ul class="clearfix">                   
                <li><a runat="server" href="PerfectGift.aspx">the Perfect Gift</a></li>
                <li><a runat="server" href="Contact.aspx">Contact Us</a></li>
            </ul>
            <!-- social links -->
            <ul class="about-socials">
                <li class="fb"><a href="#"><i class="icon-facebook"></i></a></li>
                <li class="twit"><a href="#"><i class="icon-twitter"></i></a></li>
            </ul>
        </nav>

And CSS for "socials":

.socials li a {
    color: #FFF;
    float: left;
    background: url('../images/twitter.png') no-repeat;
    margin: 0 2px;
}

.socials.top {
    display: inline-block;
    overflow: hidden;
    float: right;
    margin-top: 0px;
}

.socials li{
    display: inline-block;
}

CSS for clearfix:

    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

.clearfix {clear:both;}

I have tried margin: 0; but it does not work. Any help or suggestions would be appreciated.