我想不通怎么讓菜單項一直居中。在我的情況下，包含文本& quot名字姓氏& quot對于其內容來說不夠寬，導致菜單位于右側。我將它設置為flex: 1 0 auto，這允許它擴展。我已經提供了我的代碼的簡化版本。

.container {
  margin: 0 auto;
  width: 100%;
  max-width: 950px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
}

.list {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
}

<div class="container">
  <a class="logo" href="/">
    <h1>Name Surname</h1>
  </a>
  <nav class="nav">
    <ul class="list">
      <li class="item">
        <a class="link" href="#about">About me</a>
      </li>
      <li class="item">
        <a class="link" href="#skills">Skills</a>
      </li>
      <li class="item">
        <a class="link" href="#education">Education</a>
      </li>
      <li class="item">
        <a class="link" href="#projects">Projects</a>
      </li>
      <li class="item">
        <a class="link" href="#cv">CV</a>
      </li>
      <li class="item">
        <a class="link" href="#somelink">Some Link</a>
      </li>
    </ul>
  </nav>
  <div class="settings">
    <button>TM
        </button>
    <button>LS
        </button>
  </div>
</div>

不確定這是不是你想要的效果？

如果你只需要將名字放在容器的中心，只需要將h1的樣式設置為text-align:center即可。

如果我誤解了想要的結果，我道歉。

.container {
  margin: 0 auto;
  width: 100%;
  max-width: 950px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
}

.list {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
}
/*   ADDED   */
a.logo h1{
  text-align:center;
}

<div class="container">
  <a class="logo" href="/">
    <h1>Name Surname</h1>
  </a>
  <nav class="nav">
    <ul class="list">
      <li class="item">
        <a class="link" href="#about">About me</a>
      </li>
      <li class="item">
        <a class="link" href="#skills">Skills</a>
      </li>
      <li class="item">
        <a class="link" href="#education">Education</a>
      </li>
      <li class="item">
        <a class="link" href="#projects">Projects</a>
      </li>
      <li class="item">
        <a class="link" href="#cv">CV</a>
      </li>
      <li class="item">
        <a class="link" href="#somelink">Some Link</a>
      </li>
    </ul>
  </nav>
  <div class="settings">
    <button>TM
        </button>
    <button>LS
        </button>
  </div>
</div>