Html 固定导航条离开Div和Overflow、宽度规格和标签规格don'；行不通

我正在一个网站上工作，目前正在为肖像模式设备进行优化。我想在页面顶部有一个固定的导航栏，这样无论您在哪里，都可以单击其中一个导航按钮。但出于某种原因，导航栏一直离开它所在的div。我不知道我的代码在哪里弄乱了，或者我可能遗漏了什么。我尝试过限制宽度百分比，使用overflow:hidden，甚至在li中指定内容。如果我将位置保留为默认（静态）或使用position:sticky，则导航栏不会离开div

/*手机风格*/
身体{
颜色：#7a503c；
背景色：#bd7d3b；
背景图片：url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/34a8808d-f7f3-40c0-bfb4-e0928a5dabde/d3991v1-c838c361-483b-4d3e-8ee7-94f135191afc.jpg/v1/fill/w_900，h_900，q_75，strp/无缝木_木板_纹理_由_10ravens_d3991v1-fullview.jpg？token=eyj0exaiijkv1qilcjhbgcioijiuzi1nij9.eyjzdwioij1cm46yxbwoimlzcyi6invybjphcha6iwib2jqijpbw3iagvpz2h0ijOIPD05MdailcjwyxRoijoix9mXc8znge4zc1Mn2yzltqwyzatymzinc1zgfizgVCl2qzotkxdjetyzgZgZgZgZgZgZgZyZyZyZyZyZyZyZyZyZyZyZyZgZgZgZgZgZyZyZyZlZlZtZlZtZtZlZtZtZlZtZtZtZtZlZtZtTlZtZtTlZtZtTmMmMmMmMmMmMdZyZyZyZyZyZyZyZyZyZyZyZyZyZyZyZ；
填充：20px；
字体系列：“Raleway”，“Hind Siliguri”，无衬线；
}
/*主体*/
div{
背景色：#fff；
宽度：90%；
保证金：0自动；
利润上限：-30px；
填充：1.25em；
边框：1px实心#000；
}
收割台h1{
字体系列：“伯克希尔斯瓦什”，“加拉达”，“梅里恩达一号”，草书；
文本对齐：居中；
颜色：#7a503c；
保证金：自动；
边际上限：0px；
边缘底部：20px；
字体大小：300%；
文本阴影：1px 1px#000；
}
第h4节{
字体大小：30px；
}
a节：链接，
a:参观了{
颜色：#7a503c；
文字装饰：无；
}
a部分：悬停，
a:主动的{
颜色：#7a503c；
文字装饰：下划线；
}
第a节链接：链接，
分区a：已访问{
颜色：#7a503c；
文字装饰：无；
}
分区a：悬停，
分区a：激活{
颜色：#7a503c；
文字装饰：下划线；
}
部门链接{
保证金：0；
边界：无；
填充：0；
}
/*航行*/
#导航栏{
背景色：#af0000；
字体系列：“Playfair显示”、“Merriweather”、“Libre Baskerville”、衬线；
排名：0；
位置：固定；
宽度：100%；
保证金：0-1.25em；
溢出：隐藏；
边框底部：1px实心#000；
}
#navbar ul{}
#李国宝{
显示：内联块；
填充：0.0625em 0.3125em；
字号：1.25em；
}
#导航栏a{
文字装饰：无；
颜色：#dca56；
}
#导航栏a：链接{
颜色：#dca56d；
}
#导航栏a：已访问{
颜色：#dca56d；
}
#导航栏a：悬停{
颜色：#dca56d；
字体大小：粗体；
}
#导航栏a：激活{
颜色：#dca56d；
字体大小：粗体；
}
img{
宽度：100%；
边框：1Spx实心#000；
边缘顶部：20px；
}

烹饪网站
烹饪网站

如果您不需要将导航扩展到全宽，您可以尝试：

#navbar {
background-color: #af0000;
font-family: 'Playfair Display', 'Merriweather', 'Libre Baskerville', serif;
top: 0;
position: sticky;
width: calc(100% + 2.5em);
left: 0;
padding: 0;
margin: -1.25em -1.25em 1.25em -1.25em;
overflow: hidden;
border-bottom: 1px solid #000;
}

如果您需要顶部的全宽导航条

#navbar {
background-color: #af0000;
font-family: 'Playfair Display', 'Merriweather', 'Libre Baskerville', serif;
top: 0;
position: fixed;
width: 100%;
left: 0;
padding: 0;
overflow: hidden;
border-bottom: 1px solid #000;
}

---

谢谢。它们都很好，在网站上看起来不错。但我注意到，在第一个结果中，导航栏出现在标题h1下方，即使top设置为0。有没有办法解决这个问题？不管怎样，非常感谢。@BigSad2020 position sticky表示该块将按html中的创建顺序排列，并将粘贴到顶部：滚动时为0。所以只需在html中将导航栏与标题交换，或者在导航栏之后定义H1，好的。谢谢。