容器默认无内边距，需按断点设置padding（如px-4 sm:px-6 lg:px-8），避免嵌套叠加，并为Header/Footer统一添加响应式内边距以保障视觉一致性。
container 默认没有内边距，内容紧贴视口边缘
绝大多数 CSS 框架（如 Bootstrap、Tailwind）的 .container 类只控制宽度和居中，不设置 padding。这意味着即使内容被限制在 1200px 宽度内，左右依然可能紧贴浏览器窗口边缘，尤其在小屏设备上阅读吃力。
解决方式不是改 width，而是给容器加内边距：
.container {
padding-left: 1rem;
padding-right: 1rem;
}注意：不要用 margin 替代 —— margin 会让容器整体位移，padding 才真正“撑开”内容与边界之间的空白。
响应式内边距要分断点写，不能一刀切
移动端需要更大呼吸感（比如 16px），桌面端则可收窄（比如 24px）。直接写死 padding: 0 1rem 会导致小屏留白不足、大屏留白过量。
立即学习“前端免费学习笔记（深入）”；
推荐按框架断点分层处理：
-
@media (max-width: 575.98px)：设padding: 0 1rem（约 16px） -
@media (min-width: 576px) and (max-width: 991.98px)：设padding: 0 1.5rem -
@media (min-width: 992px)：设padding: 0 2rem（约 32px）
如果用 Tailwind，直接写 px-4 sm:px-6 lg:px-8 即可，语义清晰且无需手写媒体查询。
避免嵌套 container 导致 padding 叠加
常见错误：在已有 .container 内又套一层 .container，或误将 .row / .wrapper 当作容器使用，结果 padding 层层累加，内容被挤到中间一小条。
检查 DOM 结构是否冗余：
<div class="container">
<div class="container"> <!-- ❌ 多余嵌套 -->
<p>文字</p>
</div>
</div>正确做法是：单页最多一个顶层 .container，内部用 .row + .col 布局，或直接用 max-width + margin: 0 auto 自定义容器。
第三方组件（如 Header / Footer）常忽略 container 间距
很多 UI 库的 Header 或 Footer 组件默认占满全宽，且自身无 padding。即使主内容区加了 container，头部/尾部仍会“撞墙”。
需单独处理：
- 给
header和footer加相同断点下的padding-left/padding-right - 或统一用
section包裹，并复用同一套 container 类名 - 若用 CSS-in-JS（如 styled-components），可提取
containerPadding变量复用
否则用户滚动到顶部/底部时，视觉节奏会突然断裂 —— 这个细节最容易被忽略，但对整体体验影响很大。
