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

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>
htmlcss


Solution 1:[1]

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

Solution 2:[2]

Just add a margin-left to your logo to move it more to the right. If you want more space between the last button and the rest of the content you can also add a margin-left to the .link:last-child If you want elements to space apart then use margin. margin: auto will distribute all remaining space within flexbox and css-grid (just as a side note for the future):

.logo {
  margin-left: 25px;
}

.link:last-child {
  margin-left: 30px;
}

/* original CSS */
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 3:[3]

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: inherit;
  padding: 15px 4%;
  justify-content: space-between;

}

.logo {
    
    margin-left: 20px;
    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;
}

.link:last-child {
    margin: auto;
}

.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;   
}

Solution 4:[4]

give them all a little bit of margin in your css file. That's all I can tell you without seeing your CSS file

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dev-Siri
Solution 2 tacoshy
Solution 3 Mr. Faraj
Solution 4 Taylor Belk

Related Questions