You can use the :first-child selector to access that. Just add these 2 lines to your css after the ones you have about the menu:

#main-nav li:first-child{padding-left:0;background:none;}
#main-nav li:first-child a{padding-left:0;}

Also tweak the left/right padding on the a to 14px to get them all on one line.

I’ve looking into a solution for my own list items.  I’m building a site for a client who expressed interest in having bullets as separators between links. One thought come to my mind—throw a div in between each list item to fit the size of the bullet.

The problem with wanting to have bullets ONLY as separators between links is that using background images with the actual list tag places a bullet for each link. How does one go about removing the unwanted bullet on a specific<a> tag?

Removing the <li> tag off my “home” link throws the whole div bar off, so I’m curious what the best solution is here. If I can “hide” the first <li> tag for the home link, that would be great!

Thanks for your assistance! I’ve included the link in the “website” area of form response.

-Rob