bootstrap 的 `container` 类会自动添加左右内边距（padding），导致内容两侧出现白边；只需移除该类或改用 `container-fluid` 即可消除默认间距。

在使用 Bootstrap 构建响应式页面时，开发者常将布局包裹在

中以实现居中与最大宽度控制。但该类默认应用了 padding-right: 15px; padding-left: 15px;（在标准断点下），这正是你截图中左右“白边”（即非预期的空白区域）的根源——尤其在全宽动画头图（如 Canvas 背景 + 全屏标题）场景下，这种 padding 会破坏视觉完整性。

✅ 正确解决方案：
直接移除 container 类，改用语义更清晰、无内置 padding 的结构容器。例如：

Off-grid radio for sovereign AI. LoRa mesh comms via Meshtastic — no internet required.

通过 Meshtastic LoRa 网格网络收发消息；适用于离线通信、网格状态查询、读取最近网格消息或发送 LoRa 短信。

下载

<!-- ❌ 错误：引入默认 padding -->
<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），可改用 container-fluid —— 它提供 100% 宽度且无水平 padding，适合全宽组件；
• 切勿通过 !important 强制覆盖 .container { padding: 0 !important; }，这会破坏框架一致性，且在不同断点下可能引发意外布局错位；
• 检查是否误将 container 应用于 或根级 wrapper，此类嵌套易被忽略，却是 padding 泄露的常见源头。

总结：Bootstrap 的 container 是功能型工具，不是必须项。理解其设计意图（居中+留白）后，按需选用 container-fluid 或自定义容器，才能精准控制视觉边界，让动画头图真正“撑满视口”。