How to create a nav bar like Apple?

Question

How can I create navigation bar like Apple has? I have given it a try and here is what I have so far:

As you can see, the spacing of the buttons are a bit off. I used justify-content: space-around to achieve this. I have tried to make the spacing the same like the Apple website but have not been successful and was wondering if anyone can help me. Just for a reference, here is the navigation bar of the Apple website.

Here is what I have tried:

.wrapper {
  height: 100vh;
}

nav {
  height: 44px;
  overflow: scroll;
  background: #323232;
}

nav ul {
  display: flex;
  height: 44px;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

nav li {}

nav a {
  display: block;
  color: white;
  font-size: 15px;
  font-weight: lighter;
  text-decoration: none;
  transition: 0.3s;
}

nav a:hover {
  color: #B8B8B8;
}

<div class="wrapper">
  <nav>
    <ul>
      <li><a href="#"><i class="fab fa-houzz"></i></a></li>
      <li><a href="#">Ban</a></li>
      <li><a href="#">Warn</a></li>
      <li><a href="#">Gift</a></li>
      <li><a href="#">User</a></li>
    </ul>
  </nav>
</div>

Answer 1

A few things:

1. Apple applies a "container" with a "max width" the the nav. That has been added below.
2. I've adjusted some styling to improve the look / feel. Comments in the CSS below.
3. If you look carefully, apple has "dead space" between links. That exists in this markup / layout as well.

If this does not solve your problem, then please advise what you mean by "the spacing is off" - be specific and clear, otherwise it's impossible to help.... :)

body {
margin: 0;
}

.wrapper {
  height: 100vh;
}

nav {
  height: 44px;
  background: #323232;
  text-align: center; /* to center the UL in the nav */
}

nav ul {
  display: flex;
  max-width: 1200px; /* change to desired width */
  /* removed height from here, apply to a elements */
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0 auto; /* 0 auto allows it to self-center in the nav */
  list-style-type: none;
}

nav li {}

nav a {
  display: inline-block;
  height: 44px; /* apply the height here, pushes the li / ul to be the correct height */
  line-height: 44px; /* to get vertical centering */
  color: white;
  font-size: 15px;
  font-weight: 100;
  text-decoration: none;
  transition: 0.3s;
}

nav a:hover {
  color: #B8B8B8;
}

<div class="wrapper">
  <nav>
    <ul>
      <li><a href="#"><i class="fab fa-houzz"></i></a></li>
      <li><a href="#">Ban</a></li>
      <li><a href="#">Warn</a></li>
      <li><a href="#">Gift</a></li>
      <li><a href="#">User</a></li>
    </ul>
  </nav>
</div>