如何实现logo旁放置文本同时保持导航链接靠右对齐

布局不符合预期的核心原因是对Flex容器中margin: auto的分配逻辑不熟悉：
Flex容器的剩余可用空间，会平均分配给所有设置了同方向margin: auto的子元素。你同时给.logo和.title设置了margin-right: auto，logo和title之间、title和导航之间会被平分到相等的空白间距，最终标题被挤到容器中间，无法紧贴logo，导航虽然靠右，但左侧和标题之间隔了大段空白。

不需要修改原有HTML结构，仅调整CSS属性即可实现需求：

• 删除.logo规则中的margin-right: auto，logo本身默认靠容器最左侧排列，不需要额外占据右侧空间
• 仅保留.title的margin-right: auto：title紧贴在logo右侧后，它的margin-right: auto会占满title和导航之间的所有剩余空间，把导航固定在容器最右端，正好满足布局要求。

修正后的CSS代码 #

.logo {
  cursor: pointer;
  margin-left: 1.5rem;
  height: 3rem;
  width: auto;
  /* 已移除原规则中的margin-right: auto */
}

.title {
  text-transform: capitalize;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  margin-right: auto; /* 仅保留此处的auto属性即可 */
}

header {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 4rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav_links {
  list-style: none;
}

.nav_links li {
  display: inline-block;
  padding: 0 1.5rem 0 1rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.2rem;
}

原有HTML代码无需任何修改，即可实现「logo+标题紧贴在左侧、导航整体靠右」的效果。

如果后续需要给logo和标题整体添加统一样式、点击区域或者边距，也可以把logo和标题包裹在同一个左侧容器中，代码语义和可维护性更好：

调整后的HTML结构 #

<header>
  <!-- 左侧品牌区容器 -->
  <div class="header-brand">
    <img class="logo" src="./Images/ic-logo.svg" alt="logo">
    <div class="title">
      <span class="title1">COLMAR</span>
      <span class="title2">ACADEMY</span>
    </div>
  </div>
  <nav>
    <ul class="nav_links">
      <li><a href="#">On Campus</a></li>
      <li><a href="#">Online</a></li>
      <li><a href="#">For companies</a></li>
      <li><a href="#">Sign in</a></li>
    </ul>
  </nav>
</header>

对应CSS代码 #

.header-brand {
  display: flex;
  align-items: center;
  margin-left: 1.5rem;
  margin-right: auto; /* 把auto属性加在品牌容器上，占满右侧剩余空间 */
}

.logo {
  cursor: pointer;
  height: 3rem;
  width: auto;
  /* 移除原有的margin属性，间距由父容器控制 */
}

.title {
  text-transform: capitalize;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  margin-left: 0.5rem; /* 可按需调整logo和标题的间距，提升视觉效果 */
  /* 移除原有的margin-right: auto */
}

/* header和.nav_links相关样式和原代码保持一致即可 */
header {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 4rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav_links {
  list-style: none;
}

.nav_links li {
  display: inline-block;
  padding: 0 1.5rem 0 1rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.2rem;
}

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