0

I'm using flexbox space between property to make the nav links of the navbar in the center but, they aren't exactly in the center, I think that it's because of the login and sign up buttons, when there was only a signup button the nav links were exactly in the center.

navigation bar code:

body,
html {
  height: 100%;
  margin: 0;
  font-family: "Montserrat", sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
li, a, button {
  font-family: "Montserrat",sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #edf0f1;
  text-decoration: none;
}

.logo {
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  color: goldenrod;
  font-size: 22px;
  order: 1;
}

nav {
  order: 2;
}

.btn_group {
  order: 3;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10%;
  background-color: #24252A;
  position: fixed;
  top: 0;
  width: 100%;
}

.nav_links {
  list-style: none;
  display: flex;
}

.nav_links li {
  display: inline-block;
  padding: 0px 20px
}

.nav_links li a {
  transition: all 0.3s ease 0s;
}

.nav_links li a:hover {
  color: #ddad34;
}

.LogInButton {
  padding: 9px 25px;
  background-color: #24252A;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  border-radius: 50px;
}

.SignUpButton {
  padding: 9px 25px;
  background-color: goldenrod;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  border: none;
  border-radius: 50px;
}

button: hover {
  background-color: #ddad34;
}
<header>
  <p class="logo">Hotel LA</p>
  <nav>
    <ul class="nav_links">
      <li><a href="WebForm1.aspx">About</a></li>
      <li><a href="WebForm2.aspx">Orders</a></li>
      <li><a href="WebForm3.aspx">Contact Us</a></li>
    </ul>
  </nav>
  <div class="btn_group">
    <a href="Login.aspx"><button class="LogInButton">Log In</button></a>
    <a href="Registration.aspx"><button class="SignUpButton">Registration</button></a>
  </div>
</header>

Thank you very much

ohad
  • 29
  • 5

1 Answers1

1

Create a table with one row and six columns for each of the components and apply a different padding to each column until you get the fields in the middle

sinfryd
  • 70
  • 7
  • Thank you that's a good idea but isn't there a simpler way of doing that – ohad Feb 10 '21 at 19:50
  • 1
    You can try `margin-left` and `margin-right` but you have to leave less space on the right as the login and registration buttons take up more – sinfryd Feb 10 '21 at 19:55
  • Thank you very much! I've used this: margin-right:-125px; in the nav style and it works – ohad Feb 10 '21 at 19:59
  • Ok great, if you can accept the answer to close it if it has served you – sinfryd Feb 10 '21 at 20:03