メディアクエリが反映されません。

前提・実現したいこと

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

この中の１部分だけメディアクエリが反映されず、スマホ画面だと細長く表示されてしまいます。

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

このサイトの中の’ホームステイのしおり’(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%;
の部分が４８０ｐｘ以内の画面で反映されません。他の部分はスマホ画面で見た時に反映されています。


```ここに言語名を入力
html, css

ソースコード

試したこと

googleで調べましたが、対処法がわかりませんでした。

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

ここにより詳細な情報を記載してください。

Jon_do

2021/08/17 09:25

質問とは関係ないですが、 PCモニタの解像度が高いとファーストビューのレイアウトが崩れるので要修正です。

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

回答1件

ベストアンサー

238行目の設定で上書きされています。以下のコードをmediaより前に記述してください。

CSS
1.abhomestay > div {
2  width: 40%;
3  height: 60%;
4  background: hsla(154, 100%, 88%, 0.5);
5  margin-top: 30px;
6  margin-left: 30px;
7  padding: 2%;
8}
9
10@media (min-width: 0px) and (max-width: 480px) {
11  .abhomestay > div {
12    width: 99%;
13    padding: 1%;
14  }
15}