导航栏YORK logo居中失效求助：左侧偏移问题排查

你的核心问题是nav-right使用了绝对定位，脱离了header的flex布局流，导致中间的logo无法获得足够空间实现居中。以下是修复后的代码和关键改动说明：

修复后的CSS代码 #

body {
  font-family: europa, sans-serif;
  padding-left: 3vw;
  padding-right: 3vw;
  margin: 0; /* 清除默认边距，避免横向滚动 */
}

header {
  display: flex;
  width: 100%; /* 让导航栏占满可用宽度 */
  align-items: center; /* 垂直居中所有导航元素 */
}

nav {
  display: flex;
  align-items: center; /* 垂直居中导航内的文本 */
}

.nav-left-press {
  color: #b3b3b3;
  margin-left: 1vw; /* Work与Press之间的间距 */
}

.nav-right-about,
.nav-right-contact {
  color: #b3b3b3;
}

.nav-right-contact {
  margin-left: 1vw; /* About与Contact之间的间距 */
}

.nav-center-logo {
  flex: 1; /* 占据左右导航之外的所有空间 */
  text-align: center; /* 文本居中显示 */
}

保持原HTML结构不变 #

<header id="header">
  <nav class="nav-left">
    <div class="nav-left-work">Work</div>
    <div class="nav-left-press">Press</div>
  </nav>
  <div class="nav-center-logo">YORK</div>
  <nav class="nav-right">
    <div class="nav-right-about">About</div>
    <div class="nav-right-contact">Contact</div>
  </nav>
</header>

关键改动说明 #

1. 移除绝对定位：删掉.nav-right的position: absolute和right: 3vw，让右侧导航回到header的flex布局流中，确保header能正确分配三个子元素的空间。
2. 设置header宽度与垂直居中：给header添加width: 100%和align-items: center，保证导航栏占满宽度且所有元素垂直对齐。
3. 让logo占据中间空间：给.nav-center-logo设置flex: 1，使其自动填充左右导航之外的所有可用空间，配合text-align: center实现文本居中。
4. 优化样式写法：移除冗余的p选择器关联，直接给导航文本类设置颜色，避免影响页面其他p标签；给右侧导航的Contact添加左侧间距，和左侧导航的间距保持一致。

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