如何使用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 上搜索了许多类似的帖子，但似乎没有一个答案能得到想要的结果。