链接被推到右边的原因是h1和.nav-main的margin-left: auto;声明。在这段代码中，我注解掉了这两个声明：

header {
  align-items: center;
  background-color: black;
  color: rgb(255, 255, 255);
  text-align: center;
}

.nav-main {
  display: flex;
  align-items: center;
  /* margin-left: auto; */
  text-align: center;
  margin-inline: 10;
}

h1 {
  font-family: "GasoekOne-Regular";
  font-size: 45px;
  /* margin-left: auto; */
  font-weight: 700;
}

.nav-link {
  align-items: center;
  font-family: arial;
}

.nav-link {
  text-decoration: none;
  list-style: none;
  display: inline-block;
  justify-content: space-between;
  display: flex;
  padding-left: 10px;
  padding-right: 10px;
  color: #ffffff;
}

<div>
  <header class="nav-main">
    <br>
    <h1 class="nav-logo nav-main">TENSTARLIGHT</h1>
    <div class="header-item nav-main">
      <li class="nav-item nav-main">
        <a class="nav-link" href="">Store</a>
      </li>
      <li class="nav-item nav-main">
        <a class="nav-link" href="about.html">About</a>
      </li>
      <li class="nav-item nav-main">
        <a class="nav-link" href="">Contact Us</a>
      </li>
    </div>
  </header>

</div>

在更正标记并删除不需要的CSS声明后，此代码段具有相同的结果：

nav {
  display: flex;
  background-color: black;
  color: white;
}

nav h1 {
  font-family: "GasoekOne-Regular";
  font-size: 3em;
}

nav ul {
  display: flex;
  align-items: center;
  list-style-type: none;
  padding: 0;
}

nav a {
  font-family: arial;
  text-decoration: none;
  padding-inline: 10px;
  color: white;
}

<nav>
  <h1>TENSTARLIGHT</h1>
  <ul>
    <li>
      <a href="#">Store</a>
    </li>
    <li>
      <a href="about.html">About</a>
    </li>
    <li>
      <a href="#">Contact Us</a>
    </li>
  </ul>
</nav>