Html 固定位置导致我的收割台向右推

当我没有修好它的时候，我的头会占据它容器的整个宽度

html{
字体大小：32px；
}
身体{
文本对齐：居中；
}
标题{
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：2.25rem；
填充：0.625rem；
底部边框：3倍纯黑；
字体系列：“Cinzel装饰”，草书；
}
导航{
字体系列：“我是法国佳能SC”，衬线；
文本对齐：右对齐；
柔性生长：1；
字号：1rem；
}

当我修复页眉时，它的右侧会被推出页面：

标题{
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：2.25rem；
填充：0.625rem；
位置：固定；
宽度：100%；
z指数：10；
底部边框：3倍纯黑；
字体系列：“Cinzel装饰”，草书；
}

有没有其他合适的方法可以不在右边添加填充来抵消更改

HTML代码：

小心
W

使用固定位置时，需要有参考点，以便元件知道其固定位置。应通过添加以下内容来解决此问题：

标题{
排名：0；
左：0；
}

这会将元素附加到屏幕的右上部分。因为元素是固定的，所以宽度也可能不稳定。如果标题是全屏标题，只需使用

width:100vw

相对于另一个容器 如果您的元素需要相对于另一个元素固定并且具有相同的宽度，则父元素需要具有

position:relative

这将告诉您的组件在绝对放置时使用什么作为参照。使用“左上角0”将其锚定到相对元素的左上角，而“宽度100%”将使其占据相对容器的宽度。
使用时，该元素将从正常文档流中删除，并且不会在页面布局中为该元素创建空间。它相对于视口建立的初始包含块进行定位

如果指定
width:100%
，元素的总宽度将是其包含块的100%，加上任何水平边距、填充和边框（除非使用了框大小：边框框，在这种情况下，只有边距添加到100%以更改其总宽度的计算方式）

标题上的
宽度：100%
和
位置：固定的
组合是导致flex容器中页面右侧导航菜单项溢出的原因。这是因为
width:100%
允许内容大于其包含的块和溢出。如果添加
框大小：边框框到页面，然后解决溢出问题。此外，还可以为固定位置容器设置
顶部
和
左侧
位置，以指定与图元边界的偏移


*，
*：：之前，
*：：之后{
框大小：边框框；
}
html{
字体大小：32px；
}
身体{
文本对齐：居中；
}
标题{
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：2.25rem；
填充：0.625rem；
位置：固定；
排名：0；
左：0；
宽度：100%；
z指数：10；
底部边框：3倍纯黑；
字体系列：“Cinzel装饰”，草书；
}
导航{
字体系列：“我是法国佳能SC”，衬线；
文本对齐：右对齐；
柔性生长：1；
字号：1rem；
}

小心
W
你能加入你的HTML吗？@TannerDolby updated请参见此处：