如何将导航栏（navbar）中的列表项移至左侧？

你的导航栏列表项始终靠右，核心问题是重复使用带margin-left: auto的.nav-main类，加上HTML结构不规范、CSS样式冗余导致的。以下是修正后的代码和说明：

修正后的HTML代码 #

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

修正后的CSS代码 #

header {
  background-color: black;
  color: rgb(255, 255, 255);
  padding: 1rem 0; /* 用padding替代<br>控制上下间距 */
}

.nav-main {
  display: flex;
  align-items: center;
  gap: 2rem; /* 控制logo和导航的间距 */
  padding: 0 1rem; /* 左右内边距避免贴边 */
}

.nav-logo {
  font-family: "GasoekOne-Regular";
  font-size: 45px;
  font-weight: 700;
  margin: 0; /* 去掉默认margin */
}

.header-item {
  display: flex;
  gap: 1.5rem; /* 控制列表项之间的间距 */
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  font-family: Arial;
  text-decoration: none;
  color: #ffffff;
}

关键修改点 #

• 移除所有多余的.nav-main类，仅保留header上的该类，避免margin-left: auto重复生效将元素推至右侧。
• 将包裹列表的<div>替换为<ul>，符合HTML语义化规范，同时用flex布局实现列表项横向排列。
• 删除h1的margin-left: auto属性，确保logo保持靠左对齐。
• 用gap属性替代padding控制元素间距，布局更简洁可控。
• 清理重复的CSS定义，比如两次写.nav-link的冗余代码。

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