メディアクエリでｈ1の大きさが変更できない

htmlで記述したｈ1がメディアクエリを使用したときにフォントサイズを変更できなくなりました。

HTMLs

<body>
	<div class="box1">
            <img class="headerimg" src="images/aiharadental-header_01.jpg" alt="">
            
            <div class="box1_inner">
            <div class="site">
            <h1 id="home"><a href="#">あいはら歯科医院<br><span>AIHARA DENTAL CLINIC</span></a></h1>
            </div>
以下省略
<body>

css
通常

.site h1 a{
    font-size: 4rem;
    text-decoration: none;
    color: #333232;
    font-weight: 600;
}

```

```css
577px以下の設定
@media (max-width: 577px){
.box1 .site h1 a{
		font-size: 2.5rem;
	}

```
```
css
480px以下の設定
@media (max-width: 480px){
	.box1 .site h1 a{
		font-size: 1.5rem;
	}
```


577ｐｘ以下の設定はうまくいくのですが480ｐｘ以下で設定したいときに反映されません。
原因として考えられることがあれば教えていただきたいです。

miyabi_pudding

2020/05/17 04:38

.site h1 a{ font-size: 4rem; text-decoration: none; color: #333232; font-weight: 600; } と、各メディアクエリスタイルを書いている順番はどうなっていますでしょうか？三つとも含めた、（実際の記載と同じ順番で）コードをできるだけ省略せず記載お願いします。