html正文溢出的原因未知

所以我正在为一个类构建一个站点，我有一个意想不到的css问题。较小尺寸时，主体似乎会扩展到视口之外。在将车身宽度设置为

100vw

和

100%

且没有任何变化的情况下，我不明白为什么会发生这种情况

您可能需要将代码段复制粘贴到代码笔中。Stack不允许我链接到代码笔：(

不管怎样，你能告诉我的任何事情都会有帮助的

正文{
宽度：100vw；
保证金：0；
填充：0；
}
.页面包装器{
宽度：100%；
身高：100%；
显示：网格；
网格模板柱：0.5fr重复（3，2fr）0.5fr；
网格模板行：自动0em重复（2，自动）；
网格模板区域：“标题”
". . . . ."
“.main。”
“页脚页脚”；
}
.标题{
显示器：flex；
位置：相对位置；
对齐项目：居中；
弯曲方向：立柱；
高度：80vh；
网格区域：标题；
颜色：白色
}
.navbar{
显示器：flex；
利润率最高：8%；
宽度：70%；
证明内容：中心；
}
.导航项目{
字号：2rem；
边距：0.2米；
}
多特先生{
右边距：0.15em；
}
.dot.first，.dot.last{
}
.欢迎光临{
边缘顶部：1.5em；
填充：0.1em；
字体大小：3rem；
文本对齐：居中；
}
.header\u视频包装器{
网格区域：标题；
身高：100%；
宽度：100%；
溢出：无；
}
.header_视频覆盖{
不透明度：0.4；
位置：绝对位置；
宽度：100%；
身高：100%；
}
.U视频{
位置：绝对位置；
}
.主要内容{
网格区域：主；
高度：自动；
/*在节之间添加中断*/
垫面：2米；
}
.页脚{
身高：4rem；
网格区域：页脚；
}
/*占位符类仅用于网格演示*/
.占位符{
宽度：100%；
背景颜色：灰色；
}
@媒体屏幕和屏幕（最小宽度：768px）{
.page_容器{
网格模板柱：0.5fr重复（3，2fr）0.5fr；
网格模板行：重复（3，自动）14rem；
网格模板区域：“标题”
“.carousel carousel carousel carousel carousel carousel”
“.主要。”
“页脚页脚页脚页脚页脚页脚页脚”；
}
.标题{
高度：45vh
}
navbar先生{
}
.导航项目{
}
.dot.first，.dot.last{
/*显示：无*/
}
.主要内容{
}
.页脚{
}
}

特鲁罗多元文化节
•
•
•
•
•
欢迎来到特鲁罗多元文化节

内容（四个链接的文本）不会分成新的行：当它们都在一行时，它们肯定相当宽，这使您的HTML内容比浏览器窗口更宽

---

让内容适合（较小的文本），以较窄的宽度包装内容（媒体查询），或者通过添加overflow:hidden to.page wrapper（或.header）来隐藏溢出内容.

您应该查看

溢出：

css属性以更改文本的换行方式，未换行的文本会导致元素的扩展超出预期

---

刚刚看到你所做的编辑，这就解决了问题。谢谢你，伙计，我感谢你的帮助！@Leviathan\u the\u很好，没问题，接受答案并告诉我你使用了什么方法（只是出于好奇）。