Html 我的导航栏无法正确填充100%的屏幕宽度。导航栏中的项目水平对齐

我是HTML和CSS编码的新手，一直致力于创建一个实践网站。我的导航栏遇到了这个问题：

当我将宽度更改为100%时，导航栏项目水平对齐，彼此重叠。[导航条图像，宽度：100%

我似乎可以将“.top level menu>li”类的宽度更改为一个非常特定的数字，它填充了我的屏幕，但它根本无法100%填充宽度

。第三级菜单{
位置：绝对位置；
排名：0；
右：-190px；
宽度：190px；
列表样式：无；
填充：0；
保证金：0；
显示：无；
}
.第三级菜单>li{
高度：45px；
背景色：#6640C1；
背景#6640C1；
}
.第三级菜单>li:悬停{
背景颜色：金色；
}
.二级菜单{
位置：绝对位置；
顶部：45px；
左：0；
宽度：100%；
/*宽度：273.2px*/
列表样式：无；
填充：0；
保证金：0；
显示：无；
}
.第二级菜单>li{
位置：相对位置；
高度：45px；
背景色：#6640C1；
背景#6640C1；
宽度：100%；
}
.第二级菜单>li:悬停{
背景颜色：金色；
}
.顶级菜单{
背景色：红色；
列表样式：无；
填充：0；
保证金：0；
宽度：100%；
高度：100px；
z指数：1；
}
.顶级菜单>li{
位置：相对位置；
高度：30px；
/*宽度：273.2px*/
背景#6640C1；
z指数：2；
文本对齐：居中；
}
.顶级菜单>li:悬停{
背景色：金色！重要；
}
.顶级菜单li:悬停>ul{
显示：内联；
}
.顶级菜单a{
字体系列：“Fjalla One”，无衬线；
颜色：#FFFFFF；
文字装饰：无；
填充：0 10px；
背景#6640C1；
显示：块；
线高：45px；
}
.顶级菜单a：悬停{
颜色：#000000；
背景颜色：金色；
}

我相信这就是您想要的。运行代码片段以查看实际情况

希望这有帮助

我使用了

display:flex

并修复了一些填充

。第三级菜单{
位置：绝对位置；
排名：0；
右：-190px；
宽度：190px；
列表样式：无；
填充：0；
保证金：0；
显示：无；
}
.第三级菜单>li{
高度：45px；
背景色：#6640C1；
背景#6640C1；
}
.第三级菜单>li:悬停{
背景颜色：金色；
}
.二级菜单{
位置：绝对位置；
顶部：45px；
左：0；
宽度：100%；
/*宽度：273.2px*/
列表样式：无；
填充：0；
保证金：0；
显示：无；
}
.第二级菜单>li{
位置：相对位置；
高度：45px；
背景色：#6640C1；
背景#6640C1；
宽度：100%；
}
.第二级菜单>li:悬停{
背景颜色：金色；
}
.顶级菜单{
列表样式：无；
宽度：100%；
高度：100px；
z指数：1；
显示器：flex；
}
.顶级菜单>li{
位置：相对位置；
高度：30px；
背景#6640C1；
z指数：2；
文本对齐：居中；
}
.顶级菜单>li:悬停{
背景色：金色！重要；
}
.顶级菜单li:悬停>ul{
显示：内联；
}
.顶级菜单a{
字体系列：“Fjalla One”，无衬线；
颜色：#FFFFFF；
文字装饰：无；
背景#6640C1；
显示：块；
线高：45px；
填充：0px 15px 0px 15px；
}
.顶级菜单a：悬停{
颜色：#000000；
背景颜色：金色；
}

我相信这就是您想要的。运行代码片段以查看实际情况

希望这有帮助

我使用了

display:flex

并修复了一些填充

。第三级菜单{
位置：绝对位置；
排名：0；
右：-190px；
宽度：190px；
列表样式：无；
填充：0；
保证金：0；
显示：无；
}
.第三级菜单>li{
高度：45px；
背景色：#6640C1；
背景#6640C1；
}
.第三级菜单>li:悬停{
背景颜色：金色；
}
.二级菜单{
位置：绝对位置；
顶部：45px；
左：0；
宽度：100%；
/*宽度：273.2px*/
列表样式：无；
填充：0；
保证金：0；
显示：无；
}
.第二级菜单>li{
位置：相对位置；
高度：45px；
背景色：#6640C1；
背景#6640C1；
宽度：100%；
}
.第二级菜单>li:悬停{
背景颜色：金色；
}
.顶级菜单{
列表样式：无；
宽度：100%；
高度：100px；
z指数：1；
显示器：flex；
}
.顶级菜单>li{
位置：相对位置；
高度：30px；
背景#6640C1；
z指数：2；
文本对齐：居中；
}
.顶级菜单>li:悬停{
背景色：金色！重要；
}
.顶级菜单li:悬停>ul{
显示：内联；
}
.顶级菜单a{
字体系列：“Fjalla One”，无衬线；
颜色：#FFFFFF；
Made changes to the code snippet here:
.top-level-menu {
            background-color: red;
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100px;
            z-index: 1;
            display:flex;
            justify-content:space-between;
        }

        .top-level-menu>li {
            position: relative;
            height: 30px;
            /* width: 273.2px; */
            background: #6640C1;
            z-index: 2;
            text-align: center;
            flex:1;
        }