bootstrap 的 `container` 类会自动添加左右内边距（padding），导致页面内容两侧出现白边；只需移除该类或改用 `container-fluid` 即可消除默认 padding。
在使用 Bootstrap 构建响应式页面时，开发者常将内容包裹在
中以实现居中与最大宽度控制。然而，container 类默认设置了 padding-left: 15px 和 padding-right: 15px（在所有断点下），这正是你在动画页头（如 #large-header）两侧看到“白边”的根本原因——并非 margin 或定位问题，而是容器自身的 padding。
✅ 正确解决方式如下：
-
方案一（推荐）：移除 container 类
若你希望内容完全贴边（例如全屏动画背景、横幅标题等），直接删除 container 类即可：<!-- ❌ 原始（含默认 padding） --> <div class="container"> <div class="demo">...</div> </div> <!-- ✅ 修正后（无 padding） --> <div class="demo"> <div class="content"> <div id="large-header" class="large-header"> <canvas id="demo-canvas"></canvas> <h1 class="main-title">Internet <span class="thin">Of</span> Things</h1> </div> </div> </div> -
方案二：改用 container-fluid
该类同样提供响应式宽度管理，但不设置左右 padding（仅在部分版本中保留 padding-right: 0; padding-left: 0;），语义上更契合“全宽布局”需求：<div class="container-fluid"> <div class="demo">...</div> </div>
⚠️ 注意事项：
- 不要通过暴力覆盖 CSS（如 padding: 0 !important）来修复，这会破坏 Bootstrap 的响应式一致性；
- 检查是否误将 .container 应用于多层嵌套元素——单个页面通常只需一个容器级 wrapper；
- 若需局部去 padding，可结合 Bootstrap 工具类：p-0（全方向）、px-0（仅左右）、mx-n3（负外边距抵消）等，但应优先考虑语义化结构优化。
总结：Bootstrap 的 padding 行为是设计使然，而非 bug。理解 container 与 container-fluid 的语义差异，并按需选用，是构建专业、可控布局的关键一步。
