body 默认 margin: 8px 是横向溢出主因，需设为 margin: 0; padding: 0；100vw 遇 padding/border 必溢出，应全局 box-sizing: border-box；flex 子项需 min-width: 0 防撑破；慎用大间距类与固定宽值。
body 默认 margin 是罪魁祸首
几乎所有浏览器（Chrome、Safari、Firefox）都会给 设置 margin: 8px。这 8px 左右各一，加起来就是 16px 的隐式水平空间——哪怕你写了 width: 100vw，实际渲染宽度仍是 100vw + 16px，必然触发横向溢出和右侧空白。
修复只需一行：body { margin: 0; padding: 0; }
注意：padding: 8px 是常见错误写法，它会人为加出 16px 内边距，让问题更严重。
100vw 宽度 + padding/border = 溢出铁律
当你对某个元素（比如 .background 或 .header）设置 width: 100vw，同时又加了 padding-left: 5vw 或 border: 2px solid，它的总宽度就变成 100vw + padding + border，超出视口是确定事件。
- 删掉冗余的
width: 100vw—— 父容器已占满，子元素默认块级即可撑开 - 全局启用
box-sizing: border-box，确保 padding/border 不额外加宽 - 用
min-height: 100vh替代height: 100vh，避免内容不足时高度塌陷引发连锁错位
Flex/Grid 布局中子项“撑破”容器
在 display: flex 容器里，子项默认有 min-width: auto。一旦内部文本、图片或固定宽元素过长，它就会强制拉伸整个容器，导致右侧溢出——即使你没看到滚动条，document.body.scrollWidth > window.innerWidth 就已成立。
关键修复点：
- 给 flex 子项加
min-width: 0（尤其是.main-content这类主区域） - 对可能溢出的内容（如长 URL、未换行英文）加
overflow-wrap: break-word和word-break: break-word - 避免在小屏下使用大数值间距类，例如
ml-40在 375px 屏幕上等于 160px，直接推到视口外
Bootstrap 或 Tailwind 的栅格/间距类埋雷
Bootstrap 的 .row 默认带 margin-left: -15px; margin-right: -15px，配合 .container 的 padding 实现视觉对齐，但在窄屏下负边距会制造不可见的横向空间；Tailwind 的 ml-32、w-[600px] 等类在 max-[639px] 断点下极易失控。
排查建议：
- 在 Chrome DevTools 中打开 Rendering 面板 → 勾选 “Emulate mobile screen”，再启用 “Highlight overflows”
- 逐层悬停检查元素的 Total Width 是否超过视口宽度
- 搜索高危类名：
ml-、mr-、w-[、min-w-、flex-shrink-0（后者会阻止收缩，常是元凶）
真正难缠的不是某一行 CSS 写错了，而是多个看似无害的声明叠加后，在缩放或小屏下突然越界。每次改完记得手动缩放页面（Ctrl + -），看右侧是否还“漏光”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
