Media Queryが実際のモバイルデバイス、エミュレーターでは崩れてしまう。

こんにちは。独学でWEB開発の勉強をしております。
学習を兼ねて作成しているWEBサイトのレスポンシブ対応についてお伺いできればと思います。

レスポンシブのテストとして私のスマホのビューポートサイズに合わせてメディアクエリを書き、
Chrome, Firefox　Dev Toolではレイアウトが崩れることなく表示されますが、実機では写真のようにレイアウトが崩れて表示されてしまいます。
iPhone8,11でも確認しましたが、レイアウトは崩れてしまっているので、全てのモバイルサイズのデバイスに影響が出ているようです。

Xiaomi Redmi Note9　(viewport size 393px/759px)をテストに使用しています。

自身でもHead内のMetaタグの確認、メディアクエリの確認、CSSプロパティの確認を行いましたが解決に至らず、ご質問させていただ来ます。
経験も浅く、お見苦しいコードかもしれませんが、皆様のアドバイスを頂けましたら幸いです。

GitHubのURLを捕捉欄に貼っておきます。

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

モバイル端末に対してのレスポンシブが効かない。
Chrome, Firefox　Dev Toolではレイアウトが崩れることなく表示されるが、実際のモバイルデバイスではレイアウトが崩れて表示されてしまう。

該当のソースコード

試したこと

HTML Head内Metaタグの確認、メディアクエリの確認、CSSプロパティがブラウザに対応しているかの確認。

補足情報（FW/ツールのバージョンなど）

GitHub
https://github.com/flutnative/komugi-test

サイトページ
https://flutnative.github.io/komugi-test/

Media Queryの優先順位の問題かと思い、Media Queryの順位書き換え、!importnatなどCSSプロパティに入れてみましたが未だ解決にならず。
エミュレーターの場合Dev Toolで確認してみると、全くMedia Queryは効いておらず、別に書いたwidth 375pxのみのMQが読み込まれている。