ナビゲーションボタンがインラインで表示されない

これで、ナビゲーションがインラインブロックに設定されていますが、何らかの理由でサファリに表示されるようになります。それはクロムでうまく動作しますが、私は何を変更する必要があるか分かりません。 Webブラウザのウィンドウのサイズを変更すると、それ自体が修正されます。どんな助けもありがとう。ナビゲーションボタンがインラインで表示されない

nav{ 
    @include span(12); 
nav ul{ 
    @include span(12); 
    list-style: none; 
    display: inline; 
    float: right; 

} 

li{ 
    display: inline; 
    float: right; 
    padding: 2%; 
} 
} 


nav ul li a { 
    display: inline-block; 
    text-decoration: none; 
    color: white; 
    background-color: #FF4343; 
    border-radius: 49px; 
    -moz-border-radius: 49px; 
    -webkit-border-radius: 49px; 
    border: 0px solid #EB0000; 
    width: 100%; 
    height: auto; 
    text-align: center; 
    padding: 10%; 
    font-family: 'Montserrat', sans-serif; 
    font-size: small; 
    text-align: center; 
}

HTML：：

<nav id="desktop-nav"> 
<ul id="desktop-nav"> 
<li><a href="#">Our Team</a></li> 
<li><a class="scroll" id="green" href="#form-header">Contact Us</a> </li> 
<li><a href="location.html">Location</a></li> 
<li><a href="#">Our History</a></li> 
<li><a href="services.html">Our Services</a></li> 
<li><a href="index.html">Home</a></li> 
</ul> 
</nav>

* @include span(12)