# I think I am getting a double margin bug

**URL:** <https://forum.kirupa.com/t/i-think-i-am-getting-a-double-margin-bug/312630>\
**Category:** web dev\
**Created:** [August 9, 2010, 4:41pm UTC](https://forum.kirupa.com/t/i-think-i-am-getting-a-double-margin-bug/312630 "2010-08-09T16:41:01Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![omgjtt](https://avatars.discourse-cdn.com/v4/letter/o/9de053/32.png) [@omgjtt](https://forum.kirupa.com/u/omgjtt)\
**Post date:** [August 9, 2010, 4:41pm UTC](https://forum.kirupa.com/t/i-think-i-am-getting-a-double-margin-bug/312630/1 "2010-08-09T16:41:01Z")

</div>

Hello,

I am working on a site. (link below)

[http://theweedkiller.com/](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!