Title: Exclude one item from margin setting - navigation bar
Tags: jquery;html;css
Question: I'm trying to exclude the margin setting for one item. The last one, "Kontakt"
<nav&gt;
<ul&gt;
<li&gt;<a href="index.html"&gt;HJEM</a&gt;</li&gt;
<li&gt;<a href="forum"&gt;FORUM</a&gt;</li&gt;
<li&gt;<a href="doner.html"&gt;DONER</a&gt;</li&gt;
<li&gt;<a href="servere.html"&gt;SERVERE</a&gt;
<li&gt;<a href="faq.html"&gt;FAQ</a&gt;</li&gt;
<li style="margin-right: 0 !important;"&gt;<a href="kontakt.html"&gt;KONTAKT</a&gt;</li&gt;
</ul&gt;
</nav&gt;
nav {margin: 10px auto; width: 700px;}
nav ul {width: 700px; height: auto; list-style: none; float: left; padding:0;}
nav ul li a {
background: #FFFFFF;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 18px;
text-align: center;
color: #717171;
text-decoration: none;
float: left;
padding: 8px 0;
width: 106px;
margin: 0px 10px 0 0;
nav ul li{ position:relative; float:left;}
nav ul li a:hover {background: #f1f1f1;}
nav ul li ul.submenu {
position: absolute;
width: auto;
display:none;
top: 35px;
nav ul &gt; li:hover &gt; ul {
left: 0;
display: block;
Center navigation bar
Thanks for your time, you can check out the code at htttp://hjortefjellet.com
Comment: What is the problem? You have margins on your anchors, not on your list elements.

Comment: This is not the relevant part of your CSS. Look into the styling of the `a` element themselves. Also read about [the clearfix hack](http://stackoverflow.com/questions/8554043/what-is-clearfix) to understand why styling the `li` has no effect.

Here is the accepted answer: Your margin right is placed on a link right here
nav ul li a {
background: #FFFFFF;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 18px;
text-align: center;
color: #717171;
text-decoration: none;
float: left;
padding: 8px 0;
width: 106px;
margin: 0px 10px 0 0;<- margin right
So all you need to do is:
<ul&gt;
<li&gt;<a href="index.html"&gt;HJEM</a&gt;</li&gt;
<li&gt;<a href="forum"&gt;FORUM</a&gt;</li&gt;
<li&gt;<a href="doner.html"&gt;DONER</a&gt;</li&gt;
<li&gt;<a href="servere.html"&gt;SERVERE</a&gt;
<li&gt;<a href="faq.html"&gt;FAQ</a&gt;</li&gt;
<li&gt;<a style="margin-right: 0 !important;" href="kontakt.html"&gt;KONTAKT</a&gt;</li&gt;
</ul&gt;
You can also do that with css:
nav ul li:last-child a{
margin-right:0;
Comment for this answer: ok i edited the css and if that doesn't work try the inline styles in the ul placed on the a element!
Comment for this answer: A combination of this, making the width smaller and margin bigger solved the problem. Thank you.

Here is another answer: Part of the problem is that each list item has a specific width value. Even if you apply a 0 margin to the right of the last item, you still have spacing. I think you'll need to account for that and refactor your widths a bit. You can start by adding this change:
nav ul li a {
margin: 0px 12px 0 0;

Here is another answer: If you need to select the last element I am assuming there will be nested ul. you can use many CSS3 selectors here but In your case to select the last element I used :nth-last-child(1).
You have to add this 2 line of code only. choose red color here for just better visibility
nav ul li li:last-of-type a{color:#717171;font-size:16px;}
nav li:nth-last-child(1) a{color:red;font-size:16px;}
here is a Working Demo. http://jsbin.com/zacevosa/4/

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2014:00:03/15/14', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<jquery><html><css>', 'Title': 'Exclude one item from margin setting - navigation bar', 'ViewCount': 285, 'id': 22428300, 'user_AboutMe': '', 'user_AccountId': 4138912.0, 'user_DisplayName': 'user3394828', 'user_Reputation': 45.0, 'user_Views': 30.0, 'user_id': 3394828.0}}