Html 在菜单项（导航）之间留出更大的空间

我开始用HTML5和一些CSS样式创建我的第一个网页。我遇到了一个问题，我希望有人能帮我解决

我试图在菜单项之间留出空间，如：

ABOUT        HELP       CONTACT

我已经找到了一个简单的方法来做这件事，但它还不够好。例如，我使用导航元素创建了两个菜单，如下所示：

<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>

问题是，它为所有li元素提供了相同的空间，我如何对其进行编码，以便能够控制让我们假设nav2应该具有正确的边距：10px，但另一个元素之间的空间应为40px？

希望你们能明白我想做什么

简单地说：

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

---

您可以使用以下选项：

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

---

像这样，你为

li

元素设置了不同的规则，这些元素的祖先是class

.nav2

Oki，我不知道在同一个块中可以有两个名字，比如.nav2和li..Ye，就像另一个人写的。。它工作得很好。。只是不知道而已！

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