响应式网站小屏幕导航栏对齐问题求助

问题根源 #

1. 强制宽度限制：媒体查询中给.nav设置了min-width:650px，当屏幕宽度小于650px时，这个固定宽度会让导航栏超出视口范围，直接导致向右偏移。
2. 定位属性缺失：固定定位的.nav没有设置left:0和right:0，无法自适应屏幕宽度，同时没有清除父元素可能带来的间距继承。
3. HTML语法错误：
   • li标签的class属性缺少引号，导致样式无法正确应用
   • CONTACT按钮的标签嵌套混乱，a标签错误包裹了闭合的li标签，影响页面结构解析

修复步骤及代码调整 #

1. 修复HTML结构错误 #

<header class="header">
  <div class="top-bar">
    <div class="top-bar__content">
      <section class="phone">
        <i class="fa-solid fa-phone icon" style="color: #B197FC  "></i>
        +46708638640
      </section>
      <section class="email">
        <i class="fa-solid fa-envelope icon" style="color: #B197FC;"></i>
        akermans2@gmail.com
      </section>
    </div>
  </div>

  <div class="bottom-bar">
    <div class="bottom-bar__content">
      <a href="#" class="logo">
        <img class="logo__img" src="lifeisbydesign2.png" alt="Life is by design logo">
      </a>
      
      <nav class="nav">
        <ul class="nav__list">
          <li class="nav__item">
            <a href="#" class="nav__link">ABOUT</a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">CLIENTS</a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__btn">CONTACT</a>
          </li>
        </ul>
        <div class="hamburger">
          <div class="bar"></div>
          <div class="bar"></div>
          <div class="bar"></div>
        </div>
      </nav>  
    </div>      
  </div>
</header>
<body>
  <!-- 注释内容保留 -->
  <video
    id="background-video"
    autoplay
    loop
    muted
    poster="https://player.vimeo.com/video/590014592"
  >
    <source src="pattern_-_85590 (Original).mp4" type="video/mp4" />
  </video>
</body>
</html>

2. 修改媒体查询中的导航栏样式 #

@media (max-width: 650px) {
  .nav {
    position: fixed;
    top: 110px;
    left: 0; /* 强制对齐屏幕左侧 */
    right: 0; /* 自适应屏幕宽度 */
    background-color: #f7e8ee91;
    box-shadow: 2px 2px 20px black;
    min-width: auto; /* 移除固定宽度限制 */
    padding: 15px 0; /* 调整内边距优化布局 */
  }

  .nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
    width: 100%; /* 改为100%占满导航栏宽度 */
    padding: 0; /* 清除默认内边距 */
  }

  .bottom-bar {
    margin-left: 0;
  }
}

3. 补充全局样式优化（可选） #

确保导航链接的内边距不会导致额外偏移：

.nav__link, .nav__btn {
  padding: 8px 15px; /* 统一内边距，避免默认样式干扰 */
}

额外提示 #

• 建议将hamburger菜单在小屏幕下设置为display: block，实现点击展开/收起导航的交互（当前代码中汉堡菜单是隐藏状态）
• 可以给固定定位的导航栏添加z-index属性，避免被其他元素遮挡

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