Flex Box绝对是这里要走的路。其他人提供了非常有用的链接，但我也想看看css tricks文章。我在这方面做了一些努力，但请参阅下面的完全注解的标记

/* added this to give you a starry night */
body {
  margin: 0;
  background-image: url(https://picsum.photos/3333/5000?image=827);
  background-size: cover;
}

.navigation-bar {
  --ul-left-padding: 2rem; /* this is how far we want the ul left padding to be*/
  display: flex; /* added this */
  align-items: center; /* added this */
  /*position: fixed; removed this so the navigation bar is full width*/
  position: sticky;
  margin-top: 0.5rem;
  padding-left: 1rem;
  /*z-index: 1; deleted this*/
  /*margin: auto; deleted this - not needed */
}

.navigation-bar li {
  list-style-type: none;
  counter-increment: count; /* added this so we can use counters*/
}

/* added this rule so rather than adding numbers, it does it automatically for you!*/
.navigation-bar li::before {
  content: "0"counter(count);
  margin-right:0.5rem;
  font-weight: bold;
}

/* added this to ensure the anchor elements look like the parent elements */
.navigation-bar a {
  text-decoration: none;
  color: inherit;
}

.navigation-bar img {
  height: 40px;
  width: 40px;
  border-radius: 100%; /* put a circle around the cat */
}

.navigation-bar ul {
  
  display: flex; /* added this to arrange the li elements in a row*/
  align-items: stretch; /* added this so the li:hover rule puts the line at the bottom of the element*/
  gap: 0.5rem; /* added this to put a space between each li elmement*/
  margin: 0;
  padding: 0 1rem 0 var(--ul-left-padding); /* added this to remove default padding and put a space on each side.*/
  /*overflow: hidden;*/
  height: 70px;
  background-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(5px);
}

.navigation-bar li {
  display: flex; /* make this a flex item to space the anchor elements vertically in the center */
  align-items: center;
  /*float: right; removed this */
  padding-inline: 0.5rem;
  color: white;
  border-bottom: 2px solid transparent; /* so the border doesn't keep shoving up the text, if we make the border transparent it'll take up the space but won't be visible */
  transition: border-bottom-color 200ms; /*make it a smooth transition */
}

.navigation-bar li:hover {
  border-bottom-color: white;
}

.spacer {
  flex-grow: 1;
  position: relative; /* create a new containing block for the ::before pseudo element */
}
.spacer::before {
  content: ""; /* always need this so it displays */
  position: absolute; /* move this to the center of the parent element */
  left: 1rem;
  top: 50%;
  height: 0.25rem;
  width: calc(100% + var(--ul-left-padding) * 0.25); /* make the width so it always overlaps the ul to the right by 25% of the stated padding */
  background: rgba(128,128,128,0.25); /* make it a bit transparent */
  z-index: 1; /* put ut in front of the ul element */
}

<div class="navigation-bar">
  <img src="https://placekitten.com/50/50" alt=""><!-- deleted style attribute - floats are so 1990s-->
  <div class="spacer"></div> <!-- added this so it pushes the menu to the right.-->
  <ul>
    <!-- I've rearranged these to put them in the order you specified in the image example supplied and removed the <h6> tag. We'll style the anchor tag instead. We'll use counters to add the numeric prefixes-->
    <li><a href="#">HOME</a></li>
    <li><a href="#">DESTINATION</a></li>
    <li><a href="#">CREW</a></li>
    <li><a href="#">TECHNOLOGY</a></li>
  </ul>
</div>

第一
从第3行删除class<ul class>
秒
学习flex-box，float是一个古老的学校

.navigation-bar ul {
    overflow: hidden;
    height: 70px;
    background-color: rgba(255,255,255,0.18);
    backdrop-filter: blur(5px);

    //added properties
    width:100%;
    display:flex;
    justify-content:space-evenly;
}

flex-box资源：

1.凯文·鲍威尔youtube tuto：https://youtu.be/u044iM9xsWU

1. MDN文档：https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

这是一个快速的解决方案与flexbox。我试着模仿你的第一个屏幕的标题。

.main-page {
  background: gray;
  height: 100vh;
  width: 100wv;
}

.navigation-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
 
}

.navigation-bar li {
  list-style-type: none;
}

.navigation-bar img {
  height: 40px;
  width: 40px;
}

.navigation-bar ul {
  margin: 0;
  padding: 0 5%;
  display: flex;
  overflow: hidden;
  height: 70px;
  background-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(5px);
}

.navigation-bar li {
  float: right;
  padding: 0 10px;
  transition: background-color 0.3s ease;
}

.navigation-bar h6 {
  font-size: 12px;
  font-weight: 400;
}

.navigation-bar li:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.25);
}

.navigation-bar a:link {
  text-decoration: none;
  color: white;
  }

.navigation-bar a:visited {
  color: white;
  }

<div class="main-page">
  <div class="navigation-bar">
    <img src="assets/shared/logo.svg" alt="">
    <ul>
      <li>
        <a href="#">
          <h6><strong>03  </strong>TECHNOLOGY</h6>
        </a>
      </li>
      <li>
        <a href="#">
          <h6><strong>02  </strong>CREW</h6>
        </a>
      </li>
      <li>
        <a href="#">
          <h6><strong>01  </strong>DESTINATION</h6>
        </a>
      </li>
      <li>
        <a href="#">
          <h6><strong>00  </strong>HOME</h6>
        </a>
      </li>
    </ul>
  </div>
 </div>

您需要覆盖li和h6上的显示以内联。

ul {
  list-style-type: none;
}
li {
  display: inline;
}
h6 {
  display: inline;
}

<nav class="navigation-bar">
  <ul>
    <li>
      <a href="#">
        <h6><strong>03  </strong>TECHNOLOGY</h6>
      </a>
    </li>
    <li>
      <a href="#">
        <h6><strong>02  </strong>CREW</h6>
      </a>
    </li>
    <li>
      <a href="#">
        <h6><strong>01  </strong>DESTINATION</h6>
      </a>
    </li>
    <li>
      <a href="#">
        <h6><strong>00  </strong>HOME</h6>
      </a>
    </li>
  </ul>
</nav>