480px断点下HTML/CSS移动端页面右侧多余margin如何移除？

按问题出现概率从高到低操作即可快速解决：

• 优先验证是否为元素溢出导致的视觉偏差
  这类20px宽度的右侧留白，很少是元素显式设置的margin，大多是页面存在横向溢出，纵向滚动条占用了视口宽度，视觉上表现为右侧空白。
  快速验证：打开开发者工具控制台执行document.documentElement.scrollWidth - document.documentElement.clientWidth，如果返回值大于0即可确认存在溢出元素。
  对应修复：
  • 全局开启标准盒模型，避免padding、border额外撑大元素宽度，在全局样式中添加：

    * {
      box-sizing: border-box;
    }
    

  • 全局屏蔽横向滚动，裁剪掉超出视口的内容，给根节点添加：

    html,
    body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }
    

• 排查断点样式的匹配偏差
  以480px作为移动端断点时，浏览器渲染页面的纵向滚动条本身会占用17-20px的宽度，导致480px总视口宽度下，实际可用内容区宽度仅为460px，原本为480px设计的满宽容器无法铺满剩余空间，就会留出对应宽度的空白。
  对应修复：
  适当上调断点阈值，覆盖滚动条占用的宽度差，比如将原@media (max-width: 480px)调整为@media (max-width: 500px)，保证滚动条存在时，移动端样式也能正确触发。
• 排查元素宽度设置错误
  检查页面内的满宽容器是否存在“100%宽度+左右padding”的组合写法，例如：

  .page-container {
    width: 100%;
    padding: 0 20px;
  }
  

  未开启全局盒模型时，这类写法会让容器实际渲染宽度超出视口40px，直接触发横向滚动，最终表现为右侧留白，开启全局盒模型后这类问题会自动修复。

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