求助：如何消除页面左右白边，实现100%宽度布局？

这种左右莫名留白的坑我踩过好几次！结合你提到的侧边导航（sidenav）嫌疑，大概率是元素溢出或样式优先级冲突导致的，给你几个落地的排查和解决方向：

• 先确认viewport元标签是否存在
  移动端或响应式页面经常因为这个忽略项出问题，确保你的HTML头部有这行代码：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

  没有的话加上刷新试试，很多时候这就是隐藏的根源。

• 强制重置html和body的默认样式
  通配符清除边距有时候会被浏览器默认样式或自定义样式覆盖，直接单独指定更稳妥：

  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
  }
  

  可以先临时加上overflow-x: hidden看看白边是否消失，这能快速判断是不是横向溢出导致的。

• 重点排查侧边导航（sidenav）
  你的怀疑很准！很多侧边导航的定位或宽度设置会隐性导致页面溢出：

  • 先临时隐藏sidenav：在开发者工具里给sidenav元素加display: none，刷新后如果白边消失，直接锁定问题根源。
  • 检查sidenav的盒模型：给它加上box-sizing: border-box，确保padding、border不会额外增加宽度，避免超出视口。
  • 如果是fixed/absolute定位的sidenav，检查left/right属性值是否正确，有没有设置width: 100%同时又加了margin/padding，或者用calc()计算宽度时出错。

• 用开发者工具定位溢出元素
  按F12打开浏览器开发者工具，切换到Elements面板，把鼠标 hover 到<html>标签上，观察页面高亮区域：

  • 如果高亮区域比视口宽，说明有元素超出了视口范围。
  • 逐个展开子元素排查，找到那个超出视口的元素（大概率就是sidenav或关联元素），针对性调整样式。

• 临时应急方案（不推荐长期用）
  如果实在赶时间，给body加上overflow-x: hidden可以快速隐藏横向溢出的白边，但这只是治标，建议后续还是找到根源解决。

内容的提问来源于stack exchange，提问作者kalibvb