HTML/CSS:无法将导航栏和网站标题放在同一水平线上

<div class="header">
  <h1 class="title">网站标题</h1>
  <nav class="navbar">
    <ul>
      <li><a href="#">导航项1</a></li>
      <li><a href="#">导航项2</a></li>
      <li><a href="#">导航项3</a></li>
    </ul>
  </nav>
</div>

.header {
  width: 100%;
  display: flex;
  align-items: center;
}

.title {
  margin-right: auto;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  display: inline-block;
  margin-right: 10px;
}

.navbar li a {
  text-decoration: none;
}