メンターの報酬に合わせる

自分のサイトを公開したところ、pc,iPadでは問題なく見られますが、スマホでも見やすくしようとメディアクエリを使いコードを書いたのですが、問題が発生しました。
サイトのURLは下記の通りです。
https://naokoala.github.io/#top

この中の１部分だけメディアクエリが反映されず、スマホ画面だと細長く表示されてしまいます（サイトURLから検証してスマホ画面での表示のされ方を見て頂ければと思います）。

このサイトの中の’ホームステイのしおり’(html内ではclass="abhomestay"と書いてあります)の内の４つの項目（div）だけ、スマホで見た時にメディアクエリで書いたwidthが反映されず、細長く表示されてしまいます。

メディアクエリで480px以内の画面の場合、親要素をdisplay: blockにして、子要素のdivのwidthを99%にするようにコードを書いたのですが、スマホ画面で見ると、他の部分は反映されているのにその部分だけ反映されません。

プログラミング初心者の為、初歩的な質問で申し訳ございませんが、アドバイスを頂ければ幸いです。

ソースコードは以下の通りです。
@media (min-width: 0px) and (max-width:480px){

.ausintro {
width: 100%;
flex-wrap: wrap;
}

.ausintro > div{
width: 90%;
padding: 1%;
}

.abhomestay {
display: block;
}

.abhomestay > div{
width: 99%;
padding: 1%;
}
}

上記の
.abhomestay > div{
width: 99%;
padding: 1%;
の部分が４８０ｐｘ以内の画面で反映されません。他の部分はスマホ画面で見た時に反映されています。

なので、pc, iPad表示と同じく以下のコードが反映されてしまい、とても細長くなってしまいます。

600px以上のメディアでの表示ようのコード⬇︎

.abhomestay{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}

.abhomestay > div{
width: 40%;
height: 60%;
background: hsla(154, 100%, 88%, 0.5);
margin-top: 30px;
margin-left: 30px;
padding: 2%;
}

初心者の為、初歩的な質問で申し訳ないのですが、アドバイス頂ければ幸いです。