bootstrap 的 `container` 类会自动添加左右内边距（padding），导致页面内容两侧出现白边；只需移除该类或改用 `container-fluid` 即可消除默认 padding。
Bootstrap 为响应式布局设计了标准容器类，其中 .container 是最常用的一个——但它会在中等及以上屏幕尺寸下添加固定的左右内边距（如 padding-left: 15px; padding-right: 15px;），这是你看到“白色空隙”的根本原因。即使你的动画标题（如
）本身无 padding，只要它被包裹在 .container 内，就会继承该容器的内边距约束。
✅ 正确做法是：移除 container 类，改用语义更清晰、无默认 padding 的结构。例如：
<!-- ❌ 错误：引入 container 导致两侧白边 -->
<div class="container">
<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>
<!-- ✅ 正确：直接使用自定义容器（无 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>⚠️ 注意事项：
- 若仍需 Bootstrap 的栅格系统（如 row / col-*），可将 .row 直接置于无 padding 的父容器内——因为 .row 本身已通过负 margin 抵消了 .container 的 padding；
- 替代方案：使用 .container-fluid 类，它在所有断点下均铺满视口宽度（width: 100%），且不设水平 padding；
- 切勿通过暴力重置（如 padding: 0 !important）覆盖 Bootstrap 样式，这会破坏响应式一致性，也违背 CSS 工程最佳实践。
总结：Bootstrap 的 padding 来源明确（主要是 .container），解决方式应优先从 HTML 结构入手——精简语义化容器，而非在 CSS 中打补丁。
