移动端HTML着陆页右侧存在多余空白，求助排查原因

• 检查超出视口的元素：打开浏览器开发者工具（F12）切换到移动端视图，逐个排查元素，看是否有设置固定宽度（如width: 1200px）且未做自适应的组件（比如横幅、导航栏），这类元素会撑大页面导致横向空白。
• 给容器添加overflow-x: hidden：若确认有元素溢出，可给html、body或溢出元素的父容器设置overflow-x: hidden，阻止横向滚动条出现，但注意不要影响页面正常的纵向滚动需求。
• 优化响应式布局：对固定宽度的元素添加max-width: 100%，确保在移动端能自适应容器宽度；使用flex/grid布局时，给子元素设置flex-shrink: 1（默认值）或调整flex属性，避免元素无法收缩。
• 检查viewport元标签：确认页面头部是否包含正确的viewport设置，代码如下：

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

  缺失该标签会导致移动端以桌面宽度渲染页面，引发横向空白。
• 排查子元素的横向边距：部分子元素的margin-left/margin-right负值、过大的padding也可能导致页面整体宽度超出视口，需逐一检查这类属性。

针对你的页面，优先排查顶部导航栏和横幅区域的宽度设置，给相关元素添加max-width: 100%，同时给父容器设置overflow-x: hidden临时修复，再逐步优化每个组件的响应式适配。

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