header css 中有很多不重要的代码

Question

标题乱七八糟，调整大小时不顺畅，我认为它可以好很多，但我不知道怎么做。

css:
`/* header */
.main-header {
  width: 100%;
  height: 60px;
  background-color: #24262b;
  border-bottom: 3px solid gold;
  position: fixed;
  top: 0;
  z-index: 1;
}
.inner-header {
  width: 1200px;
  height: 60px;
  margin-left: auto;
  margin-right: auto;
  background-color: #24262b;
}
/* header logo */
.header-text {
  margin-top: 13px;
  font-size: 30px;
  font-family: "roboto";
  color: gold;
  display: inline-block;
}

/* navigation */
.navigation {
  float: right;
  margin-top: 20px;
}
.navigation ul {
  display: flex;
}
.navigation li {
  list-style: none;
  margin-right: 40px;
  font-size: 18px;
  font-family: "roboto";
}
/* last li no margin right in the nav */
.navigation li:last-child {
  margin-right: 0;
}
/* defines the nav buttons color */
.navigation a {
  color: white;
}
/* defines the color the nav changes when hover */
.navigation a:hover {
  color: rgb(215, 170, 58);
}`

html:

` <!-- Header -->
    <div class="main-header">
      <div class="inner-header">
        <h1 class="header-text">LOGO</h1>
        <!-- <p class="header-undertext">Brummen</p> -->

        <div class="navigation">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="overons.html">Over ons</a></li>
            <li><a href="onzediensten.html">Onze diensten</a></li>
            <li><a href="projecten.html">Projecten</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="vacatures.html">Vacatures</a></li>
          </ul>
        </div>
      </div>
    </div>`

我尝试使用 flexbox 对齐所有项目，但它只会折叠并进入其他元素，我希望代码尽可能干净，但我只是不知道如何。