Html 为什么'；我的css网格列不能用于我的导航吗？

我正在YouTube上复习响应网格CSS。跟随导师的课程。我的中堂网格格式化有问题。我已经包括了html和css代码以及他的导航结果和我的导航结果的图片。任何帮助都将不胜感激

我正在尝试将导航栏设置为4列网格。我想看看我在这里错过了什么

讲师成绩：

我的结果：

/*CSS变量*/
：根{
--初级：#ddd；
--深色：#333；
--灯光：#fff；
--阴影：0 1px 5px rgba（104,104,104,0.8）；
}
html{
框大小：边框框；
字体系列：Arial、Helvetica、san serif；
颜色：var（--深色）；
}
身体{
背景：#ccc；
利润率：30像素50像素；
线高：1.4；
}
.btn{
背景：var（--暗）；
颜色：var（--光）；
填充：0.6雷姆1.3雷姆；
文字装饰：无；
边界：0；
}
img{
最大宽度：100%；
}
.包装纸{
显示：网格；
栅隙：20px；
}
/*航行*/
.主导航ul{
显示：网格；
栅隙：20px；
填充：0px；
列表样式：无；
网格模板列：重复（4，1fr）；
}

会员
$199/月
亲成员
$299/月
餐厅
知识是一种美德，是一种美德，是一种美德，是一种美德

厨师
知识是一种美德，是一种美德，是一种美德，是一种美德

餐饮
知识是一种美德，是一种美德，是一种美德，是一种美德

糖果
知识是一种美德，是一种美德，是一种美德，是一种美德

你在DTLD上的生意
知识是一种美德，是一种美德，是一种美德，是一种美德

该死的，看起来很好吃&复制；2005年

将结束标记添加到锚元素后，布局将按预期工作

这就是您现在拥有的：

。主导航ul{
显示：网格；
栅隙：20px；
填充：0px；
列表样式：无；
网格模板列：重复（4，1fr）；
}

家
关于
服务
接触

代码中缺少结束锚

标记，因此一旦在其中添加结束锚标记。您的代码将完美运行。

---

谢谢。不知道我怎么会错过。