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

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  src="images/new logo.png" alt="logo">
  <nav >
    <div >
      <button >Information</button>
      <div >Dropdown Content</div>
    </div>
    <a href="#" >Pricing</a>
    <button >Login</button>
    <button  id="signup">Sign Up</button>
  </nav>
</header>

CodePudding user response：

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  src="images/new logo.png" alt="logo">
  <nav >
    <div >
      <button >Information</button>
      <div >Dropdown Content</div>
    </div>
    <a href="#" >Pricing</a>
    <button >Login</button>
    <button  id="signup">Sign Up</button>
  </nav>
</header>

CodePudding user response：

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

CodePudding user response：

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