Html 滚动到实际元素下面一点

我正在创建一个演示页面，它几乎准备好了。 这是它的代码笔链接。 但我面临两个问题

[1] 当我点击导航栏链接时，页面滚动到实际元素的下方。结果在一些实际内容下面的标题。我正在使用

sticky

标题

[2] 我不明白为什么我需要使用这么多

！CSS媒体查询中的重要信息

？我在媒体查询中做错了什么吗？在我使用

之前，媒体查询中提供的值从未更新过！重要信息

，请使用它

下面是代码

@导入url（'https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@导入url（'https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
*{边距：0；填充：0；}
正文{字体系列：'oswald'，无衬线}
.text居中{文本对齐：居中；}
.text left{文本对齐：居中；}
.block{display:block；}
.inline{display:inline；}
.bold{font-weight:bold；}
.没有装饰链接{
文字装饰：无；
颜色：黑色；
}
.no项目符号{列表样式类型：无；}
.orangered{颜色：orangered；}
.ubuntu{font-family:'ubuntu'，sans serif}
.oswald{font-family:'oswald'，sans-serif}
#标题{
背景色：#FFDEAD；
位置：粘性；
排名：0；
z指数：2；
}
#logoNtitle{
显示：内联块；
}
#收割台img{
宽度：80px；
高度：自动；
利润率：1em自动0.7em 10vw；
}
#标题文本{
位置：相对位置；
顶部：-14px；
字号：2em；
左边距：0.8em；
}
#导航条{
浮动：对；
位置：相对位置；
顶部：2.3em；
右：2米；
字体系列：“Ubuntu”，无衬线；
}
#导航栏a{
填充物：1em 0.5em 1em 0.5em；
}
#主要{
宽度：1020px；
保证金：自动；
背景色：#e6；
填充：0.05px；/*以避免边距塌陷*/
}
#主p{
边缘：1米；
}
@介质（最大宽度：1020px）{
#主{宽度：800px；}
#录像带{
宽度：500px！重要；
高度：281.25px！重要；
}
#演示{
保证金：1em自动3em！重要；
}
}
@介质（最大宽度：800px）{
#主{宽度：100%；}
#特性-1.ico{display:none！important；}
#功能-1{宽度：80%！重要；}
#导航条{
浮动：无；
位置：初始；
文本对齐：居中；
垫底：1米；
}
#logoNtitle{
显示：块；
宽度：320px；
保证金：自动；
}
#收割台img{
左边距：自动；
}
#演示{
页边顶部：1米！重要；
页边距底部：1em！重要；
}
#定价{利润底部：1.2em；}
#定价内容{
显示：初始！重要；
填充：0.05px；
保证金：1em自动！重要；
}
.卡片{
宽度：300px；
裕度：1em自动0.5em；
}
}
@介质（最大宽度：550px）{
#录像带{
宽度：90vw！重要；
高度：50.625vw！重要；
}
}
#电子邮件{
显示：块；
保证金：1em自动1em自动；
边界半径：3px；
边框：2件纯黑；
填充：0.3em7px 0.3em7px；
颜色：#1b2b34；
最小宽度：15em；
}
#提交{
显示：块；
保证金：自动1em自动；
背景色：#5fce6a；
边框：无；/*1px纯灰*/
填充物：0.5em 1em；
字号：1em；
}
#特点-1{
宽度：50%；
保证金：3em自动2em；
}
.flex{
显示器：flex；
弯曲方向：行；
}
#特征-1.ico{
显示器：flex；
高度：100px；
宽度：90px；
证明内容：中心；
对齐项目：居中；
颜色：橙色；
}
#特点-1.内容{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
高度：100px；
宽度：75vw；
左侧填充：30px；
右边填充：10px；
}
#特征-2{
保证金：自动；
显示器：flex；
弯曲方向：立柱；
}
#功能-2 ul{
列表样式类型：无；
线高：2米；
保证金：自动；
}
#专题-2.专题标题{
字体大小：1.2米；
利润率：1%自动；
}
#李：以前{
内容：'\2713'；
显示：内联块；
位置：相对位置；
右：6px；
字体大小：粗体；
}
#演示{
保证金：2em自动3em；
}
#视频标题{
文本对齐：居中；
填充：1em；
字体系列：“ubuntu”，无衬线；
}
#录像带{
显示：块；
宽度：729px；
高度：410像素；
保证金：自动；
}
#定价内容{
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格间距：1.3em；
宽度：95%；
利润率：2米自动；
}
.卡片{
边框：2件纯黑；
文本对齐：居中；
}
.卡h3{
背景色：#BDBBBB；
填充物：0.5em 1em；
}
.卡h2{
字体大小：粗体；
线高：2米；
}
.卡ul{
线高：2米；
字体系列：“ubuntu”；
}
.卡片按钮{
填充：0.5em 2.3em；
保证金：1em自动；
背景颜色：橙色；
边界：无；
字体系列：“ubuntu”；
字体大小：粗体；
}
.真的：以前{
内容：'\2713'；
显示：内联块；
位置：相对位置；
右：6px；
字体大小：粗体；
}
.错：之前{
内容：'\2717'；
显示：内联块；
位置：相对位置；
右：6px；
字体大小：粗体；
}
页脚分区{
背景色：#BDBBBB；
字体系列：“ubuntu”；
填充：0.05px；
}
页脚ul{
垫面：1.3em；
垫底：0.5em；
}
页脚李{
显示：内联；
左：1米；
右侧填充：1em；
}
.footer内容页{
边际顶部：0px！重要；
字体大小：13px；
}

代码笔-产品页面
同侧视野
提供您的电子邮件以了解有关产品的更多信息
优质材料
Lorem ipsum dolor sit amat，Concerite adispicing Elite，ipsum dolor sit amat，Concerite adispicing Elite
快速运输
Lorem ipsum amat，dolorem ipsum
及时更新维护
Lorem ipsum dolor sit amat，圣洁的精英
为什么选择我们

同侧阴唇
坐在阿梅特，康塞特图
#features, #demo, #pricing, #contact {
    margin-top: -100px;
    padding-top: 100px;
}