Html 最大宽度为960px的我的容器不'；好像不行

我想用以下代码制作一个导航栏：

<nav>
  <ul class ="container"> 
   <li class = "ul--wrap"><a class = "p p__li" href="index.php?page=home">Home</a></li>
   <li class = "ul--wrap"><a class = "p p__li" href="index.php?page=activities">Activities</a></li>
   <li class = "ul--wrap"><a class = "p p__li" href="index.php?page=locations">Locations</a></li>
   <li class = "ul--wrap"><a class = "p p__li"href="index.php?page=register">Register</a></li>
   <li class = "ul--wrap"><button class = "btn"><a class = "p p__li p__li--light" href="index.php?page=tickets">Tickets</a></button></li>                   
         </ul>
</nav>

---

当我想要更改

项之间的空间时，

项扩展了以960px为中心的容器

我相信您的问题在于您创建的

.container

CSS属性中的

max width

属性

正如@Jones-

1rem=16px

将CSS更改为：

.container{
    max-width: 60rem;
    vertical-align: center;
    margin: 0 auto;
}

---

您确实意识到默认情况下

1rem=16px

。所以

96rem！=960px

？应该是

60rem

如果你不想让导航栏扩展960px的宽度，那么你可以为你的

类提供样式，为什么还要给类提供样式呢。

.container{
    max-width: 60rem;
    vertical-align: center;
    margin: 0 auto;
}