How do I fix this mess I've gotten myself into, nav bar

So I was coding and messed up the navbar pretty bad, if anybody could fix it that would be great! By the way, I was trying to aim for the search bar a little right of the logo like pretty near it. The hot symbol more right of the search not in the middle tho and the person's icon to the right! Couldn't make it happen tho.

Codepen to make it easier for you to see the problem: https://codepen.io/hsohibnazar/pen/KKVoOdX

(disclaimer: the icons do show up on my site but in the codepen, it doesn't for some peculiar reason :/).

HTML:

<body>
  <header>
    <div style="float: left; padding-right: 10px;">
      <a href="/"><img width='200' height='50' src='Icons/logo home.png' /></a>
    </div>
    <div class="navbar" style="justify-content: center;">
      <a href="discovery.html" class="navbar__link">
        <span class="material-icons">whatshot</span>
      </a>

      <a href="profile.html" class="navbar__link">
        <span class="material-icons">person_outline</span>
      </a>
    </div>

    <div class="search-box">
      <input class="search-txt" type="text" name="" placeholder="Search">
      <a class="search-btn" href="#">
    <i class="fas fa-search"></i>

      </a>
    </div>
  </header>
</body>

CSS:

.navbar__link {
    position: static;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
    margin: 20px 0;
    border-radius: 10px;
    background: #ffffff;
    color: #000000;
    border-bottom: 1px solid #ffffff;
    display: flex;
    text-align: center;
    display: inline-block;
    padding: 20px;
}
}

// you don't need to add class to a tag, it can be selected by following way
.navbar > a {
  text-decoration: none;
  padding: 15px;
}

.header {
  display: flex;
  // make the header take all space of body
  width: 100%;
}

.navbar {
  display: flex;

  // make navbar take all space that remains after the logo
  flex: 1;
  justify-content: center;

  // make the navbar move left side else it will not be in complete middlle
  transform: translate(-100px);
}

.search-box {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000000;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

.search-btn {
  color: #ffffff;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-box:hover > .search-txt {
  width: 240px;
  padding:0 6px;
}

.search-box:hover > .search-btn {
  background: #000000;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: #ffffff;
  font-size: 16px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
}

If you could fix this please answer in the answer box below :D!

If you could fix this problem please write it the answer in the answer box, thanks!

I will update if the problem has been fixed!

[UPDATE #1] Nothing has happened thus far [UPDATE #2] FIXED

Solution

Just change your .search-box css like this and test it into your codepen.

.search-box {
  position: absolute;
  top: 1%;
  left: 12%;
  background: #000000;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}