How do I make this navigation bar responsive enough to when I make the page 75% width, the elements don't change?

Question

When I resize the page to about 75% width, the elements in the navigation bar get messed up. For example, the buttons on the right change size and the navigation links become off center.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
  font-family: 'Roboto', sans-serif;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 11% 20px 11%;
  width: 100%;
}

.navbar ul {
  display: flex;
  list-style: none;
  padding-left: 10%;
}

.navbar ul li a {
  color: #4c4d5f;
  text-decoration: none;
  font-size: 16px;
  padding: 10px 23px 10px 15px;
}

.logo {
  width: 150px;
  height: auto;
}

.dropdown_menu {
  display: none;
}

.start,
.login {
  border: 1px solid #00b289;
  border-radius: 4px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.start {
  border-radius: 4px;
  background-color: #00b289;
  color: #fff;
  margin-left: 17px;
  padding: 12px 27px 9px;
  text-align: center;
}

.login {
  padding: 12px 27px 9px;
  background-color: transparent;
  color: #00b289;
}

.login:hover {
  background-color: #00b289;
  color: #fff;
}

.dropdown {
  display: none;
}

.nav-links .product:hover+.dropdown {
  display: block;
  position: absolute;
  background: white;
  margin-top: 15px;
  margin-left: -15px;
}

<header>
  <nav class="navbar">
    <img src="bonsai-logo.svg" class="logo">
    <ul>
      <li><a>Product <i class="fas fa-caret-down"></i></a></li>
      <div class="dropdown_menu">
        <li><a>Feauture 1</a></li>
        <li><a>Feauture 2</a></li>
        <li><a>Feauture 3</a></li>
      </div>
      <li><a href="">Templates <i class="fas fa-caret-down"></i></a></li>
      <li><a href="">Pricing</a></li>
      <li><a href="">Reviews</a></li>
    </ul>
    <div class="nav-buttons">
      <button class="login">Log in</button>
      <button class="start">Start Free</button>
    </div>
  </nav>
</header>

I tried using percentages for the padding of the divs and the elements, but I still get the same problem. I just wanted the space between the logo and the navigation to get smaller when the page gets resized so everything else stays the same.

Heres the website I'm trying to recreate (I'm not trying to make it responsive for mobile yet): Bonsai

Answer 1

Firstly, you can prevent the buttons from wrapping by using Flexbox and setting white-space to nowrap.

.nav-buttons {
  display: flex;
  white-space: nowrap;
}

To ensure both links and buttons move together relative to the logo, they should be wrapped in a container:

<div class="nav-right">
  <!-- Your links and buttons here -->
</div>

With the following css

.nav-right {
  display: flex;
  align-items: center;
}

To mimic the fixed maximum width behaviour from the example site:

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 78px;
  max-width: 70rem;
}

header {
  display: flex;
  justify-content: center;
  padding: 0 2.5rem;
}