无法让justify-content在头部生效，求实现logo居左、链接居中布局

问题说明 #

需要实现Header区域内Logo居左、导航链接居中的布局，但当前配置无法达成，仅为header添加justify-content时无法同时满足两个需求，怀疑样式类存在问题。

问题分析 #

当前布局的核心问题在于：

• header作为flex容器，内部的.container（logo容器）和.links（链接容器）默认按紧凑方式排列，.links未占据header剩余宽度，导致其内部的justify-content: center无法生效（容器宽度仅包裹内容，居中无效果）。
• 导航链接的padding: 50px 50px超出了header的100px高度，会导致布局溢出。

修正后的代码 #

CSS 代码 #

body {
  margin: 0;
}

header {
  display: flex;
  height: 100px;
  align-items: center;
  background-color: black;
  /* 让子元素从左侧开始排列 */
  justify-content: flex-start;
}

a:link {
  color: #d7b361;
  font-size: larger;
  /* 调整上下内边距，避免超出header高度 */
  padding: 20px 50px;
  text-decoration: none;
}

a:hover {
  color: white;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
}

.logo {
  padding-left: 20px;
  width: 250px;
  height: auto;
}

.links {
  /* 让links容器占据header剩余全部宽度 */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML 代码 #

<header>
  <img class="logo" src="logo.png">
  <div class="links">
    <nav>
      <ul>
        <li><a href="#">Sobre mim</a></li>
        <li><a href="#">Projetos</a></li>
        <li><a href="#">Contato</a></li>
      </ul>
    </nav>
  </div>
</header>

关键修改点 #

1. header设置justify-content: flex-start：确保logo从左侧开始排列。
2. .links添加flex: 1：让链接容器占据header剩余的所有宽度，为内部内容居中提供足够空间。
3. .links设置display: flex和justify-content: center：控制内部导航链接在容器中水平居中，同时用align-items: center保证垂直居中。
4. 调整链接的padding：将上下内边距从50px改为20px，避免超出header的100px高度，同时保持水平间距。
5. 移除冗余代码：删除不必要的.container容器和多余的justify-content设置，简化结构。

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