如何实现Navbar元素左右分布：部分列表项居左，部分居右

需求说明 #

实现左侧Logo + 4个导航项，中间区域留白，右侧放置登录/注册导航项的Navbar布局。

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- CSS Style -->
  <link rel="stylesheet" href="/css/style.css" />
</head>
<body>
  <header>
    <!-- 修正Logo跳转结构，将图片包裹在跳转链接内 -->
    <a href="index.html">
      <img class="logo" src="/img/logo.png" alt="PSR Logo" width="80" />
    </a>
    <nav class="navbar">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="games.html">Games</a></li>
        <li><a href="console.html">Console</a></li>
        <li><a href="reviews.html">Reviews</a></li>
      </ul>
    </nav>
    <nav class="right-nav">
      <ul>
        <li><a href="login.html">Login</a></li>
        <li><a href="signup.html">Join</a></li>
      </ul>
    </nav>
  </header>
</body>
</html>

修改后的CSS代码 #

@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #0f182a;
}

header {
  background-color: #000000;
  display: flex;
  align-items: center;
  padding: 5px 10px;
}

.logo {
  cursor: pointer;
  width: 80px;
  background-color: #000000;
}

/* 统一导航列表基础样式，消除冗余代码 */
.navbar ul, .right-nav ul {
  font-family: "Inconsolata", monospace;
  background-color: #000000;
  list-style: none;
  display: flex;
  align-items: center;
}

.navbar li, .right-nav li {
  margin: 0 10px;
  background-color: #000000;
}

.navbar a, .right-nav a {
  text-decoration: none;
  background-color: #000000;
  color: white;
}

/* 核心：将右侧导航推至最右端，自动实现中间留白 */
.right-nav {
  margin-left: auto;
}

关键修改说明 #

1. 修正Logo跳转结构：将<img>正确嵌套在<a>标签内，保证点击Logo可跳转首页。
2. 简化CSS样式：合并重复的导航样式定义，去除无效的position: static、left属性（这类属性对flex布局无效）。
3. 实现右侧对齐：通过给.right-nav添加margin-left: auto，利用flex布局特性将右侧导航容器推至Header最右侧，自动形成中间留白区域。

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