メディアクエリが一部反映されない

実現したいこと

メディアクエリを反映したいときに、.hyoujiの768px以上までは反映するのですが、
.hyoujiの420px以上のとこが反映されません。

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

.hyoujiのメディアクエリが420px以上のとこが反映されません。
PCのウインドウのサイズは420px以上で反映するのですが、
Dimensions Responsiveのほうで420px以上で設定すると反映されないです。

該当のソースコード

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4<meta charset='UTF-8'>
5<meta  name=”viewport” content=”width=device-width,initial-scale=1.0″>
6<title>確認画面</title>
7
8<style type="text/css">
9    
10    *{
11    padding: 0;
12    margin: 0;
13    }
14
15    .icon2{
16   /* margin-top:200px; */
17    width: 200px; 
18   
19   margin-left: 100px;
20    }
21
22    @media screen and (min-width:420px) {
23    .icon2{
24   /* margin-top:200px; */
25    width: 200px; 
26   
27   margin-left: 200px;
28    }
29}
30
31@media screen and (min-width:768px) {
32    .icon2{
33   /* margin-top:200px; */
34    width: 200px; 
35   
36   margin-left: 400px;
37    }
38}
39
40@media screen and (min-width:1024px) {
41    .icon2{
42   /* margin-top:200px; */
43    width: 200px; 
44   
45   margin-left: 400px;
46    }
47}
48
49    .contents_box{
50  width: 400px;
51  height: 150px;
52  background-color: aquamarine;
53  overflow: scroll;
54}
55    .kakunin{
56        text-align:center;
57        
58        
59    }
60    
61    .hensuu{
62        border: double 5px;
63        /* font-size:20px; */
64        font-weight:bold;
65        width: 450px;
66        height: 800px;
67        background-color:#f5deb3;
68        
69        margin:0 auto;
70      
71       
72        
73    }
74
75
76
77    @media screen and (min-width:768px) {
78        .hensuu{
79        border: double 5px;
80        /* font-size:20px; */
81        font-weight:bold;
82        width: 600px;
83        height: 800px;
84        background-color:#f5deb3;
85     
86        
87    }
88    }
89
90    @media screen and (min-width:1024px) {
91        .hensuu{
92        border: double 5px;
93        /* font-size:20px; */
94        font-weight:bold;
95        width: 700px;
96        height: 800px;
97        background-color:#f5deb3;
98        
99        margin:0 auto;
100        
101    }
102    }
103
104    .btn{
105        text-align: center;
106        margin-top:50px;
107        
108    }
109    
110    
111
112
113    .sousin{
114        width:100px;
115    }
116
117    @media screen and (min-width:420px) {
118        .sousin{
119            font-size:20px;
120            margin-top:200px;
121        width:100px;
122    }
123    }
124
125    @media screen and (min-width:768px) {
126        .sousin{
127            font-size:20px;
128            margin-top:100px;
129            
130        width:100px;
131    }
132    }
133
134    @media screen and (min-width:1025px) {
135        .sousin{
136            font-size:20px;
137            margin-top:100px;
138            
139        width:100px;
140    }
141    }
142
143    .modoru{
144        width:100px;
145        font-size:20px;
146        margin-bottom:100px;
147    }
148    
149
150    @media screen and (min-width:768px) {
151        .modoru{
152            font-size:20px;
153            margin-top:100px;
154            
155        width:100px;
156    }
157    }
158
159    @media screen and (min-width:1025px) {
160        .modoru{
161            font-size:20px;
162            margin-top:100px;
163            
164        width:100px;
165    }
166    }
167   
168    .hyouji{  
169        margin-left: 0px;
170        font-size:20px;
171        font-weight:bold;
172        
173    } 
174
175     @media screen and (max-width:420px) {
176       
177         .hyouji {
178        margin-left: 0px;
179        font-size:20px;
180        font-weight:bold;
181        } 
182        
183    } 
184
185    @media screen and (min-width:768px) {
186        .hyouji{
187        margin-left:100px;
188        font-size:30px;
189        font-weight:bold;
190        }
191        
192    }
193
194    @media screen and (min-width:1024px) {
195        .hyouji{
196        margin-left:100px;
197         font-size:30px; 
198        font-weight:bold;
199        }
200        
201    }
202
203    
204
205    /* body{
206        margin-top: 0 auto;
207    }  */
208
209    
210   
211    footer{
212    position: fixed;
213    bottom: 0;
214    background-color: darkcyan;
215    width: 100%;
216   text-align: center;
217   color: darkgray;
218   padding: 20px 0;
219   font-size: 30px;  
220        }
221
222</style>
223</head>
224<body>
225
226
227    
228    
229<div class="hensuu">
230<img src="アンケート.png" class="icon2">
231
232<h1 class="kakunin">確認</h1>
233<div class="hyouji" >
234<span id="name">名前：
235    <?php echo $name; ?>
236</span>
237<br>
238
239<span>性別：
240    <?php echo  $seibetsu; ?>
241</span>
242<br>
243
244
245<span>電話番号：
246<?php echo  $tel; ?>
247</span>
248<br>
249
250<span>郵便番号：
251<?php echo  $yuubin; ?>
252</span>
253<br>
254
255<span>都道府県：
256<?php echo  $region; ?>
257</span>
258<br>
259
260<span>地区町村：
261<?php echo  $locality; ?>
262</span>
263<br>
264
265<span>町名番地：
266<?php echo  $banti; ?>
267</span>
268<br>
269
270<span>メール：
271<?php echo $mail; ?>
272</span>
273<br>
274
275<span>感想:<br>
276<?php echo nl2br($textarea);  ?> 
277</span>
278<br>
279</div>
280
281
282<form action='http://localhost/basic/complete.php' method='POST'>
283<div class="btn">
284 
285
286<input type='button' class="modoru" onclick='history.back()' value='戻る'>
287<input type='submit' class="sousin" value='送信'>
288</div>
289</div>
290
291</br>
292</br>
293
294
295</form>
296<footer>
297        <p>&copy;2022 ABCDE</p>
298    </footer>
299</body>
300</html>
301
302

試したこと

margi-leftを0にしたり、上下左右にmargin:auto auto auto 0;などにした。

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

1週間くらい悩みましたがわからなかったです！
お手柔らかにお願いします！

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

回答2件

HTML
1<!--         ↓       ↓         ↓ 全角を半角に変えてみてください -->
2<meta  name=”viewport” content=”width=device-width,initial-scale=1.0″>

投稿2022/09/04 11:59

kei344

総合スコア69407

poketatsu

2022/09/04 12:27

無事反映されました！ VScodeで開発をしていて、! + tabで出したものなのですが、全角になってしまうものなのでしょうか？

kei344

2022/09/04 13:06

VScodeを使っていないのでわかりません。

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

max-width: ではなくて min-width: じゃないですか。

css
1/*     @media screen and (max-width:420px) { */
2      @media screen and (min-width:420px) {    
3         .hyouji {
4        margin-left: 0px;
5        font-size:20px;
6        font-weight:bold;
7        }  
8    }