Html CSS导航栏的问题

我正在尝试使用HTML和CSS创建导航栏。然而，导航栏并不像我希望的那样延伸到页面的末尾。我尝试过使用

左填充：0px

和

右填充：0px但是这不起作用

以下是我迄今为止的工作：


$banner高度：50px；
@进口的https://fonts.googleapis.com/css?family=Work+Sans:400500900'；
导航{
高度：$横幅高度*2；
位置：固定；
宽度：100%；
排名：0；
过渡：顶部0.2秒放松；
}
.横幅{
文本对齐：居中；
行高：$横幅高度；
排名：0；
宽度：100%；
背景：#FEFFB7；
盒影：嵌入0px-1px 0px 0px rgba（0,0,0,0.13）；
}
.导航栏{
顶部：横幅高度；
/*矩形1：*/
背景：#FFFFFF；
盒影：0px 2px 0px rgba（0,0,0,0.11），0px 4px 6px 0px rgba（0,0,0,0.11）；
宽度：100%；
行高：$横幅高度；
文本对齐：居中；
}
.导航{
顶部：-$横幅高度；
}
//-------------------------------------------------------
/*去除ul的填充并列出样式*/
保险商实验室{
列表样式类型：无；
保证金：0；
位置：绝对位置；
}
/*创建具有间距的水平列表*/
李{
显示：内联块；
浮动：中心；
右边距：1px；
}
/*菜单链接的样式*/
李阿{
显示：块；
最小宽度：140px；
高度：50px；
文本对齐：居中；
线高：50px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
颜色：#fff；
背景:#2f3036；
文字装饰：无；
}
/*顶级链接的悬停状态*/
李：停一停{
背景：19c589；
}
/*下拉链接的样式*/
李：悬停一下{
背景:#f3；
颜色：#2f3036；
高度：40px；
线高：40px；
}
/*下拉链接的悬停状态*/
li:悬停ul a:悬停{
背景：19c589；
颜色：#fff；
}
/*隐藏下拉链接，直到需要它们*/
李乌尔{
显示：无；
}
/*使下拉链接垂直*/
李宇莉{
显示：块；
浮动：无；
}
/*防止文本换行*/
李宇莉{
宽度：自动；
最小宽度：100px；
左侧填充：0px；
右边填充：0px；
}
/*悬停时显示下拉列表*/
ul li a:悬停+.隐藏，.隐藏：悬停{
显示：块；
}
/*默认情况下，设置“显示菜单”标签按钮的样式并将其隐藏*/
.显示菜单{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
文字装饰：无；
颜色：#fff；
背景：19c589；
文本对齐：居中；
左侧填充：0px；
右边填充：0px；
显示：无；
}
/*隐藏复选框*/
输入[类型=复选框]{
显示：无；
}
/*选中“不可见”复选框时显示菜单*/
输入[类型=复选框]：选中~#菜单{
显示：块；
}
/*反应型风格*/
@媒体屏幕和屏幕（最大宽度：760像素）{
/*使下拉链接内联显示*/
保险商实验室{
位置：静态；
显示：无；
}
/*创建垂直间距*/
李{
边缘底部：1px；
}
/*使所有菜单链接全宽*/
ul li，li a{
宽度：100%；
}
/*显示“显示菜单”链接*/
.显示菜单{
显示：块；
}
}

无标题文件
我是一面旗帜
显示菜单









更新：解决方案在snippet、flexbox和padding中，UL设置为0

看到嵌入的代码段存在一些不一致的行为，下面是一个小问题：



$banner高度：50px；
@进口的https://fonts.googleapis.com/css?family=Work+Sans:400500900'；
导航{
高度：$横幅高度*2；
位置：固定；
宽度：100%；
排名：0；
过渡：顶部0.2秒放松；
}
.横幅{
文本对齐：居中；
行高：$横幅高度；
排名：0；
宽度：100%；
背景：#FEFFB7；
盒影：嵌入0px-1px 0px 0px rgba（0,0,0,0.13）；
}
导航菜单{
左侧填充：0；
显示器：flex；
}
李国荣{
柔性生长：1；
}
.导航栏{
顶部：横幅高度；
/*矩形1：*/
背景：#FFFFFF；
盒影：0px 2px 0px rgba（0,0,0,0.11），0px 4px 6px 0px rgba（0,0,0,0.11）；
宽度：100%；
行高：$横幅高度；
文本对齐：居中；
}
.导航{
顶部：-$横幅高度；
}
//-------------------------------------------------------
/*去除ul的填充并列出样式*/
保险商实验室{
列表样式类型：无；
保证金：0；
位置：绝对位置；
}
/*创建具有间距的水平列表*/
李{
显示：内联块；
浮动：中心；
右边距：1px；
}
/*菜单链接的样式*/
李阿{
显示：块；
最小宽度：140px；
高度：50px；
文本对齐：居中；
线高：50px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
颜色：#fff；
背景:#2f3036；
文字装饰：无；
}
/*顶级链接的悬停状态*/
李：停一停{
背景：19c589；
}
/*下拉链接的样式*/
李：悬停一下{
背景:#f3；
颜色：#2f3036；
高度：40px；
线高：40px；
}
/*下拉链接的悬停状态*/
li:悬停ul a:悬停{
背景：19c589；
颜色：#fff；
}
/*隐藏下拉链接，直到需要它们*/
李乌尔{
显示：无；
}
/*使下拉链接垂直*/
李宇莉{
显示：块；
浮动：无；
}
/*防止文本换行*/
李宇莉{
宽度：自动；
最小宽度：100px；
左侧填充：0px；
右边填充：0px；
}
/*悬停时显示下拉列表*/
ul li a:悬停+.隐藏，.隐藏：悬停{
显示：块；
}
/*默认情况下，设置“显示菜单”标签按钮的样式并将其隐藏*/
.显示菜单{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
文字装饰：无；
颜色：#fff；
背景：19c589；
文本对齐：居中；
左侧填充：0px；
右边填充：0px；
显示：无；
}
/*隐藏复选框*/
输入[类型=复选框]{
显示：无；
}
/*选中“不可见”复选框时显示菜单*/
输入[类型=复选框]：选中~#菜单{
显示：块；
}
/*响应式