How to create a nav bar like Apple?

Issue

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>

Solution

You will need to add an additional wrapper to ul let's say "appleNav"

Add properties of the following to appleNav

.appleNav {
  max-width: 980px;
  margin: 0 auto;
}

.wrapper {
  height: 100vh;
}

body {
  margin: 0;
}

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

nav ul {
  display: flex;
  height: 44px;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0 auto;
  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;
}

.appleNav {
  max-width: 980px;
  margin: 0 auto;
}

<div class="wrapper">
  <nav>
    <div class="appleNav">
      <ul>
        <li>
          <a href="#"><img src="https://www.iconsdb.com/icons/preview/white/apple-xxl.png" height="20"></a>
        </li>
        <li><a href="#">Mac</a></li>
        <li><a href="#">iPad</a></li>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">Watch</a></li>
        <li><a href="#">TV</a></li>
        <li><a href="#">Music</a></li>
        <li><a href="#">Support</a></li>
        <li>
          <a href="#"><img src="https://www.iconsdb.com/icons/preview/white/search-3-xxl.png" height="20"></a>
        </li>
        <li><a href="#">User</a></li>
      </ul>
    </div>
  </nav>
</div>

Answered By - Dhaval Jardosh