Make a bigger space between menu items (nav)

Question

I started creating my first web-page with HTML5 and some CSS styles in it. I have faced a problem i was hoping some could clear out for me.

I'm trying to make space between my menu items like:

ABOUT        HELP       CONTACT

I have found a simple method in how to do that, but it does not do the job good enough. As an example i have 2 menus created out of an nav element like this:

<nav class="nav2">      
    <li><a href="Højtalere.html">Stereo</a></li>
    <li><a href="Forstærkere.html">Højtalere</a></li>
    <li><a href="åbningstider.html">TV og hjemmebiograf</a></li>
    <li><a href="Computer.html">Streaming</a></li>
    <li><a href="Tilbehør.html">Tilbehør</a></li>
    <li><a href="Kabler.html">Kabler</a></li>       
</nav>  

<nav class="nav3">          
    <li><a href="login.html" style="display: inline;">Text</a></li>
    <li><a href="support.html" style="display: inline;">Text</a></li>
    <li><a href="???.html" style="display: inline;">Text</a></li>           
</nav>

Right now i have made the space with this css code:

li {
   display: inline;
   margin-right: 20px;
   }

The problem is that it makes the same space for all the li elements, how do i code it so i can control lets say the nav2 should have margin-right: 10px, but the other should have 40px in space between?

Hope you guys understand what i'm trying to do

Answer 1

simply:

li {
    margin-right: 40px;
}
.nav2 li {
    margin-right: 10px;
}

Answer 2

You can use the following:

.nav2 li {
    margin-right: 20px;
}
li {
    display: inline;
    margin-right: 40px;
}

Like this you set different rule to li elements that has ancestor with class .nav2.