React浮动导航栏无法固定，屏幕缩小时向右偏移

问题根源 #

仅给fixed定位的导航栏设置w-full，在部分视口尺寸下缺少明确的左右定位基准，容易导致容器偏移；同时内部容器的内边距设置未与视口边界配合，进一步加剧了偏移问题。

修复后的代码 #

<nav className="fixed left-0 right-0 z-50 transition-all duration-300 px-4 sm:px-6 lg:px-8">
  <div className="max-w-3xl mx-auto bg-neutral-50 dark:bg-neutral-950 rounded-full border border-border backdrop-blur-xl mt-5">
    <div className="flex justify-between items-center py-4 px-4 sm:px-6 lg:px-8">
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, magni.</p>
    </div>
  </div>
</nav>

关键调整说明 #

• 替换宽度设置：用left-0 right-0替代w-full，让fixed定位的导航栏牢牢贴合视口左右两侧，从根源避免偏移。
• 拆分内边距层级：在<nav>上设置视口级的响应式内边距，内部容器再补充自身内边距，确保不同屏幕尺寸下内容都能适配视口，不会出现偏移或超出边界的情况。
• 清理无效设置：移除之前尝试的错误内边距值，改用Tailwind自带的响应式内边距工具类，保证样式的一致性和兼容性。

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