ブレイクポイント以外でのヘッダーの表示崩れを解消したい

実現したいこと

PC表示：1366pxのようにレイアウトを崩さないようにしたいです

前提

ヘッダーの表示崩れ

発生している問題・エラーメッセージ

768-993pxの間でhamburger-menu-listの表示が崩れてしまいます。
どこを修正したらPC１３６６pxのレイアウトを維持したままにしたいです
https://i.gyazo.com/648e1f7ab7a339cd0c67a00add675347.png

該当のソースコード

    <header>
      <div class="header-outer">
        <img class="header-logo" src="./images/logo_kirameki_total_beauty.png" alt="kirameki total beauty">

        <!-- ハンバーガーボタン -->
        <button type="button" class="hamburger-button">
          <i class="fas fa-bars"></i>
        </button>
      </div>

      <!-- ハンバーガーメニュー -->
      <nav class="hamburger-menu">
        <ul class="hamburger-menu-list">
          <li class="menu menu-border"><a href="#">施設概要</a></li>
          <li class="menu menu-border"><a href="#">アクセス</a></li>
          <li class="menu menu-border"><a href="#">お問合せ</a></li>
          <li class="menu"><a href="#" class="button button-green">無料カウンセリング<i class="fas fa-chevron-right"></i></a></li>
        </ul>
      </nav>
    </header>

__________________________________________________ */
header.header {
  padding: 2rem 2.7rem 0.8rem;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1000;

}

/* ハンバーガーメニューのスタイル */
.header {
  padding: 2rem 2.7rem 0.8rem;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1000;
}

@media (min-width: 768px) {
  header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    column-gap: 17.5rem;
    margin: 2.2rem auto;
    background-color: rgba(255, 255, 255, 0.7);
}
}


/* ハンバーガーメニューのスタイル */
.header-outer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 6.2rem;
  padding: 1rem 1.5rem 1.2rem 1.5rem;
}

@media (min-width: 768px) {
  .header-outer {
    padding: 0;
    max-width: 1146px;
  }
}

@media (min-width: 768px) {
img.header-logo {
  max-width: 82%;
}
}

button.hamburger-button {
  font-size: 3.2rem;
}

@media (min-width: 768px) {
  button.hamburger-button {
    display: none;
  }
}

/* ハンバーガーメニューの表示時のスタイル */
nav.hamburger-menu.hamburger-menu-active {
  display: block;
  font-size: 1.4rem;
  position: fixed;
  top: 6rem;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 1.9rem 2rem 1.8rem 1.5rem;
  background-color: rgba(255, 255, 255, 0.7);
  /* 背景の透明度を70%に設定 */
}

.hamburger-menu {
  display: none;
}

@media (min-width: 768px) {
  .hamburger-menu {
    display: block;
  }
}

@media (min-width: 768px) {
  ul.hamburger-menu-list {
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    justify-content: space-evenly;
    column-gap: 6px;
}
}


.menu {
  margin-bottom: 15px;
}

@media (min-width: 768px) {
  .menu {
    margin-bottom: 0; /* 768px以上の場合は余白を除去 */
    padding: 0.6rem 1.6rem 0.6rem; /* 余白の代わりにpaddingを追加 */
  }
}

@media (min-width: 768px) {
  .menu-border {
    border-width: 1px;
    border-color: rgb(96, 96, 96);
    border-style: solid;
    background-color: rgb(255, 255, 255);
    padding: 0.6rem 1.6rem 0.6rem;
}
}

.menu a {
  display: block;
  text-decoration: none;
  color: #000;
}

a.button.button-green {
  display: none;
}

@media (min-width: 768px) {
  a.button.button-green {
    display: block;
    border-radius: 15px;
    background-color: rgb(0, 151, 167);
    color: #fefefe;
    font-weight: bold;
    padding: 0.7rem 2.2rem 1rem 1.6rem;
}
}

行動規範の内容に同意します

回答2件

一例ですが、下記でどうでしょう。

余計な余白を削除して、

css
1@media (min-width: 768px) {
2  header {
3    display: flex;
4    flex-direction: row;
5    align-items: center;
6    justify-content: space-around;
7/*    column-gap: 17.5rem;  この無意味に大きい余白を削除 */
8    margin: 2.2rem auto;
9    background-color: rgba(255, 255, 255, 0.7);
10}
11}

フォントサイズを画面幅基準にする。

css
1@media (min-width: 768px) {
2  ul.hamburger-menu-list {
3    display: flex;
4    align-items: center;
5/*    font-size: 1.6rem;  フォントサイズを固定ではなく */
6    font-size: 1.87vw; /* vw単位にして画面幅基準にする */
7    justify-content: space-evenly;
8    column-gap: 6px;
9  }
10}