I think I am getting a double margin bug

programming web dev
1

Hello,

I am working on a site. (link below)

http://theweedkiller.com/

I have 3 links which are being laid out using a <ul>

The problem is the margin between home and service is fine, but the margin between services and contact seems to be double the size. I have tried adding display:inline; and it seemed to do nothing. I am getting this problem in Chrome, Firefox, and IE8. I am using a CSS reset too.

Heres is the HTML I am using -

<div id=“nav”>
<ul>
<li> <a href=“index.html” id=“current”>Home</a> </li>
<li> <a href=“services.html”>Service</a> </li>
<li> <a href=“contact.html”>Contact</a> </li>
</ul>
</div> <!–end of nav div–>

Heres is the CSS I am using -

#nav ul {
margin-left:370px;
list-style-type:none;
}

#nav ul li {
float:left;
display:inline;
}

#nav ul li a {
font-family:“Myriad Pro”, Arial, sans-serif;
font-size:20px;
font-weight:bold;
color:#302013;
padding:25px 50px 5px 50px;
background-image:url(images/nav.png);
background-repeat:no-repeat;
text-decoration:none;
display:inline;
margin-right:10px;!important
}

#nav ul li a:hover {
font-family:“Myriad Pro”, Arial, sans-serif;
font-size:20px;
font-weight:bold;
color:#fff;
background-image:url(images/nav-over.png);
background-repeat:no-repeat;
text-decoration:none;
}

#nav #current {
font-family:“Myriad Pro”, Arial, sans-serif;
font-size:20px;
font-weight:bold;
color:#fff;
background-image:url(images/nav-over.png);
background-repeat:no-repeat;
text-decoration:none;
}

I have no clue why this is happening. Any help would be useful.

Thanks!