移动端消除横向滚动：保留负外边距导航栏

你当前用的overflow-x:auto是允许横向滚动，完全和需求相反，这就是代码无效的原因。以下几种方案可以在保留负外边距导航的前提下消除横向滚动：

方案一：给导航父容器设置溢出隐藏 #

找到包裹导航链接的直接父容器（比如<div class="nav-wrap">这类元素），在移动端媒体查询里添加样式：

@media(max-width: 800px){
  .nav-wrap {
    overflow-x: hidden;
    position: relative; /* 若导航是绝对定位，需加这个确保裁剪生效 */
  }
}

父容器会自动裁剪超出自身范围的内容，包括导航的负外边距部分，不会让页面整体出现横向滚动。

方案二：用clip-path裁剪导航溢出区域 #

如果不想给父容器加溢出隐藏（比如父容器还有其他元素需要完整显示），可以直接给导航元素设置clip-path，精准裁剪掉超出视口的部分：

@media(max-width: 800px){
  .nav-links {
    /* 假设导航左边负外边距是-30px，就裁剪掉左边30px的区域 */
    clip-path: inset(0 0 0 30px);
  }
}

clip-path可以灵活控制元素的可见范围，既保留负外边距布局，又不会让溢出部分触发页面滚动。

方案三：改用定位代替负外边距（更稳妥） #

如果导航是点击后显示的滑入效果，建议直接用定位控制位置，彻底避免负外边距带来的滚动问题：

@media(max-width: 800px){
  .nav-links {
    position: fixed;
    left: -100%; /* 初始隐藏在视口左侧 */
    top: 0;
    width: 70%; /* 导航宽度按需调整 */
    transition: left 0.3s ease;
  }
  /* 点击按钮后添加的激活类 */
  .nav-links.active {
    left: 0; /* 滑入视口内 */
  }
}

这种方式通过定位控制导航的显示/隐藏位置，从根源上避免横向滚动，同时保持交互效果。

额外注意事项 #

• 不要给html/body设置overflow-x:hidden，除非整个页面完全不需要横向滚动，否则可能影响其他元素的正常布局；
• 检查导航的总宽度（内容+内边距+边框），确保加上负外边距后不会超出视口宽度；
• 确保开启box-sizing:border-box，避免宽高计算错误导致的溢出。

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