How do I center navigation links?

<nav class="nav">
      <div class="nav-logo">
        <img src="https://www.w3schools.com/howto/img_avatar.png" />
        <h1>Long title here</h1>
      </div>
      <div class="nav-links">
        <ul class="nav-list">
          <li>Facebook</li>
          <li>Youtube</li>
          <li>Twitter</li>
        </ul>
      </div>
      <div class="nav-acc">
        <button>Login</button>
      </div>
    </nav>

<nav class="nav">
      <div class="nav-logo">
        <img src="https://www.w3schools.com/howto/img_avatar.png" />
        <h1>Long title here</h1>
      </div>
      <div class="nav-links">
        <ul class="nav-list">
          <li>Facebook</li>
          <li>Youtube</li>
          <li>Twitter</li>
        </ul>
      </div>
      <div class="nav-acc">
        <button>Login</button>
      </div>
    </nav>

.nav {
  background: wheat;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 2em;
}

.nav-logo {
  display: flex;
  gap: 1em;
  align-items: center;
}

.nav-logo img {
  width: 50px;
}

.nav-logo h1 {
  font-size: 2rem;
}

.nav-list {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list > li {
  font-size: 1.5rem;
  margin: 0em 2em;
}

.nav-acc {
  display: flex;
}

.nav-acc > button {
  margin: 0 0.5em;
  padding: 0.5em 1em;
  border-radius: 10px;
  border: 1px solid white;
}

.nav {
  background: wheat;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 2em;
}

.nav-logo {
  display: flex;
  gap: 1em;
  align-items: center;
}

.nav-logo img {
  width: 50px;
}

.nav-logo h1 {
  font-size: 2rem;
}

.nav-list {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list > li {
  font-size: 1.5rem;
  margin: 0em 2em;
}

.nav-acc {
  display: flex;
}

.nav-acc > button {
  margin: 0 0.5em;
  padding: 0.5em 1em;
  border-radius: 10px;
  border: 1px solid white;
}