无列表的HTML和CSS导航栏-无法使用链接填充来扩展导航栏

<nav class="navbar">
  <div class="navbar-container">
    <a href="#" class="navbar-brand">Brand</a>
    <div class="navbar-links">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
    </div>
  </div>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 10px;
}

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

.navbar-brand {
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
}

.navbar-links {
  display: flex;
  gap: 20px;
}

.navbar-links a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}

document.addEventListener('DOMContentLoaded', function() {
  const navbarLinks = document.querySelector('.navbar-links');
  const links = navbarLinks.querySelectorAll('a');

  links.forEach(link => {
    link.addEventListener('click', function(event) {
      event.preventDefault();
      // 处理点击事件
    });
  });
});