I coded my top navbar, which looks beautiful in Chrome, but doesn't look right at all in ff or ie, where the last item removes itself from the bar. If I adjust ANYTHING in the code, it doesn't look right it chrome. Any help or ideas you could give is appreciated.
<nav class="main">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="party.html">Party</a></li>
<li><a href="store.html">Store</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</nav>


body{
margin:0;
padding:0;
background-color:#1391ba;
color:#000;
}

header, nav, section, footer, aside, article{
display:block;

}

.wrapper{
width:960px;
margin:0 auto;
}

header{
height:180px;
background-color:#2bb74e;
}

nav.main{/*....................Top nav bar start.........*/
height:70px;
width:680px;
margin:-35px 0 0 0;
background-color:#f8af17;
border-radius:15px 15px 15px 15px / 15px 15px 15px 15px;
border:1px solid #000;
float:right;

}

nav.main ul{
list-style-type:none;
padding:0;
margin:0;
}

nav.main ul li{
display:block;
float:left;
}

nav.main a:link{
display:block;
padding:0 40px 0 40px;
line-height:70px;
color:#000;
font-size:18px;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
}

nav.main a:hover{
margin: 0 16px 0 16px;
padding:0 24px 0 24px;
background-color:#1391ba;
}

nav.main a:active{
background-color:#1391ba;
}

nav.main a:visited{
color:#dddada;

}/*....................Top nav bar end.........*/