Moving the navigation buttons to the left and the logo to the right

Issue

I would like to move the navigation buttons a little bit to the left and separate it from the last button which's Sign Up, at the same time, I need to move the logo a little bit to the right.

body {
  margin: 0;
}

header {
  background-color: rgb(212, 209, 209);
  display: flex;
  flex-wrap: wrap;
  /* so navbar will go under logo on small smartphones */
  align-items: baseline;
  padding: 0.5rem;
  justify-content: space-between;
}

.logo {
  width: 100px;
  margin-top: 16px;
  cursor: pointer;
}

.nav {
  display: flex;
  gap: 1rem;
  padding: 0;
}

.link {
  background: none;
  border: none;
  text-decoration: none;
  color: #777;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
}

.link:hover {
  color: black;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
}

#signup {
  padding: 10px 25px;
  background-color: rgba(0, 136, 169, 1);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

<header>
  <img class="logo" src="images/new logo.png" alt="logo">
  <nav class="nav">
    <div class="dropdown">
      <button class="link">Information</button>
      <div class="dropdown-menu">Dropdown Content</div>
    </div>
    <a href="#" class="link">Pricing</a>
    <button class="link">Login</button>
    <button class="link" id="signup">Sign Up</button>
  </nav>
</header>

Solution

If you want to move the logo to the right and signup to the left seperated from other navigation buttons then since its the first and last child, just use:

header:first-child{
   float: right;
}
header:last-child{
   float: left;
}

To adjust the middle buttons, just give a little bit of margin to position it correctly

Answered By - Dev-Siri