モバイルなどできちんと確認しておらず、いろいろとさらにお手数をおかけしていまい申し訳ありませんでした。

無知でご迷惑をおかけし、ほんとうにお恥ずかしい限りです。

少しずつ、CSSやデベロッパーツールについても勉強していこうと思います。

画像（アイキャッチ画像）の上にタイトルを重ねてメニュー表示したいなら、ボックスメニューでなく、私ならおすすめカードウィジェットを使います。
ノーコードで実現できるので。

上記の修正だけでは不十分です。

●変更前

https://notepad.pw/share/tNaVBT1VIskzqayA1PR4

ご自身の追加CSSに誤りがあります。
メディアクエリでmin-width:600pxとしており。
画面幅が600px以上のときにだけ、指定したCSSスタイルが適用されます。

また、「}」の閉じ忘れや以下のように

body .wp-block-gallery .blocks-gallery-item {
flex-grow: 0; !important;
}

となっていますが、flex-grow: 0!important;の間違いです。

●修正後

https://notepad.pw/share/e2wpsqOzo6xIsvo4dSW9

●アドバイス
分からず至る所に、ボックスメニューのメディアクエリアを書いてあり混乱の元です。
また、「初心者だから」は言い訳です。
初心者だからこそ、CSSの意味を調べ、理解してからコーディングしてください。

カスタマイズするなら、まずChromeデベロッパーツールの使い方を覚えてください。

【PC】

.box-menu {
  aspect-ratio: 5/3;
}

.box-menu-icon img {
  width: 100%;
}

まだ、解決していません。

ブラウザの端を掴んで、画面を小さくしたり大きくしたりして、タブレットやスマホの表示を確認してみてください。

いただいたCSSを追加したらきれいに改善されました。

このような素人の質問にもご対応いただき感謝いたします。

.body .box-menus .box-menu-icon * {
  margin: 0;
}