ただし、今度はロゴが左寄せではなくなってしまったのと、

前回は添付画像の赤矢印部分には、何かボタンがあるように見えます。

ご指導いただいた通り行ったところ、きれいになりました。

この度は、本当にありがとうございました。

①追加CSS

★を書いているので、ロゴの上に2pxの余白ができます。
また、以下のコードは不要だと思います。

@media screen and (max-width: 480px) {
  .logo-menu-button img {
    width: 170px;
    max-height: none;
    margin: 2px auto 0;★
  }
}

②子CSS

以下を書いており。★を追加すれば左寄せになります。

.logo-menu-button.menu-button{
  background-color: #000000!important;
  justify-content: flex-start;★
}

ハンバーガーメニューが白くなりました。

ただし、今度はロゴが左寄せではなくなってしまったのと、ロゴの上にグレーの線が入ってしまいました。

どのようにしたらグレーの線を消して、元のロゴを左寄せにできますでしょうか？

GitHubを見るスキン「モノクロ」まで変更されており。

こちらに書いた通りです。あえて変更しました。

※モノクロームスキンのモバイルメニュー色が白黒状態で統一感がなかったので、すべて黒に変更しました。

モバイルヘッダーボタン全て黒に変更しており。
仕様で間違いないですか？

間違いないです。

理由はここに書いてある理由です。

ヘッダーモバイルボタン数=3しか考慮していないと思われ。
この為、元々ヘッダーモバイルボタン数によって、黒、グレーが、変な並びになります。

あとヘッダーのメニューボタンにホームボタンのように、aタグが入っていると文字が白色に表示されていませんでした。

GitHubを見るスキン「モノクロ」まで変更されており。

●変更前

モバイルヘッダーボタン1つ目、3つ目のボタンのみ背景黒、2番目の背景グレーです。

●変更後

モバイルヘッダーボタン全て黒に変更しており。
仕様で間違いないですか？

↓スキン「モノクロ」作成者のページ

https://traveler20.site/career/

私が添付した通り、ロゴがグレーで、メニュー、検索ボタンが黒だと思います。

ヘッダーモバイルボタン数=3しか考慮していないと思われ。
この為、元々ヘッダーモバイルボタン数によって、黒、グレーが、変な並びになります。

スタイルシートに以下を入力したところ、ロゴの上下にあった余白を消すことができました。

.mobile-menu-buttons {
color: #ffffff; /* 文字色 */
background-color: #000000; /* 背景色 */
}

ハンバーガーメニューが見えにくくなってしまいました。