响应式网站导航栏不居中、fixed定位及布局调整问题求助

• 布局冲突：.site-nav同时绑定了grid类和自身的display: flex属性，两种布局模式冲突导致排版异常
• fixed定位缺失对齐属性：fixed定位元素默认不会继承父级的居中规则，未明确对齐属性会导致窗口拉伸时偏移
• 宽度规则不统一：导航栏内部没有和下方居中内容匹配的宽度/内边距规则，导致上下模块不对齐

CSS修改 #

.site-nav {
  width: 100%;
  position: fixed;
  left: 0; /* 明确固定定位左对齐视口，消除偏移 */
  top: 0; /* 固定在页面顶部 */
  z-index: 99;
  background-color: var(--background-color);
  height: 5rem;
  display: flex;
  align-items: center;
  padding: 0 20px; /* 可按需调整为和下方内容一致的左右内边距 */
  box-sizing: border-box;
}

/* 导航内部容器，和下方内容保持统一的居中规则 */
.nav-inner {
  width: 100%;
  max-width: 1200px; /* 替换为你页面其他居中模块的实际最大宽度 */
  margin: 0 auto;
  display: flex;
  justify-content: space-between; /* 天然实现logo左、菜单右的布局 */
  align-items: center;
}

.nav-logo {
  color: var(--first-color);
  padding: 20px 0;
}

/* 重置菜单默认样式，避免边距干扰 */
.nav-menu ul {
  display: flex;
  align-items: center;
  gap: 24px; /* 菜单项间距可按需调整 */
  list-style: none;
  margin: 0;
  padding: 0;
}

HTML修改 #

移除nav标签上的grid类，新增内部容器包裹导航内容，保证和下方模块宽度对齐：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<nav class="site-nav" id="header">
  <div class="nav-inner">
    <div><a href="#" class="nav-logo">.fjfr()</a></div>
    <div class="nav-menu">
      <ul>
        <li><a href="#welcome">.home()</a></li>
        <li><a href="#about">.about()</a></li>
        <li><a href="#portfolio">.portfolio()</a></li>
        <li><a href="#skills">.skills()</a></li>
        <li><a href="#contact">.contact()</a></li>
        <li class="icon-navbar"><a href="https://www.github.com/fajferekpl" target="_blank"><i class="fab fa-github"></i></a></li>
        <li class="icon-navbar"><img src="assets/img/sun1.png" id="icon-sun" alt="主题切换"></li>
      </ul>
    </div>
    <div class="hamburger-menu">
      <div class="bar"></div>
    </div>
  </div>
</nav>

• 请将.nav-inner中的max-width值替换为你页面其他居中模块的实际最大宽度，保证上下模块的左右边距完全一致
• 移动端适配时只需要调整.nav-menu的展示逻辑即可，整体布局规则不需要变动

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