如何使用HTML+CSS制作一个简单美观的导航栏（代码详解）

在不久前学习了基础知识（并很快忘记了它们）后，几个月前我开始阅读它。我已经开始制作自己的网页以测试和提高我的技能，但是我在让导航栏正确显示时遇到了问题。

我的导航栏的 HTML代码如下：

<div class="nav">
    <ul class="nav">
        <li class="nav"><a class="nav" href="#">Home</a></li>
        <li class="nav"><a class="nav" href="#">Coffee</a></li>
        <li class="nav"><a class="nav" href="#">Food</a></li>
        <li class="nav"><a class="nav" href="#">Catering</a></li>
        <li class="nav"><a class="nav" href="#">About</a></li>
        <li class="nav"><a class="nav" href="#">Contact</a></li>
    </ul>
</div>
<!--Navigation bar.-->

在编写 HTML 和 CSS 代码方面，我是一个绝对的初学者，如果做得不好，我深表歉意。

下面列出了相关元素（div、ul、li 和 a）的 CSS 代码

效果图代码如下：

div{    
    border: 2px;
    border-radius: 3px;
    margin: 0 auto 60 auto;
    padding: 10px;
    width: 980; 
}
/*BASIC DIV ELEMENT.*/
 
/*LINKS.*/
a{
    color: #545454;
    font-family: lucida grande, lucida sans, sans-serif;
    font-size: 14px;
    text-decoration: none;
}
 
a:hover, a:active {
    color: #191919;
}
/*LINKS.*/
 
/*NAV BAR*/
a.nav:link{
    background-color: #D7C5CC;
    color: #191919;
    display: inline-block;
    padding: 15px;
    text-align:center;
    width: 90px;
}
 
a.nav:hover{
    color: #191919;
    background-color: #EDD9DF;
}
 
li.nav{
    float: left;
}
 
ul.nav{
    display: center;
    margin: 0 auto 0 auto;
}
/*NAV BAR*/

我在两个方面遇到导航栏的问题：

我无法使导航栏的角正确变圆。我之前已将 ul.nav和li.nav更改为“border-radius: 10;” 作为一个属性 – 两者都无济于事。

我无法让导航栏在我的页面上正确居中（我正在 Chrome 中对其进行测试）。每隔一个 div 完美地居中；我试过编辑“显示”和“浮动”属性无效。

我在 Stackoverflow 上搜索了许多类似的帖子，但似乎没有一个答案能得到想要的结果。