レスポンシブ対応のブレイクポイントが反映されない。

実現したいこと
レスポンシブ対応の各ブレークポイントの大きさが適応されずに困っています。
@media screen and (max-width: 400px){
@media screen and (max-width: 500px){
の２つのブレイクポイントを指定しているのですが、300px代のスマホ幅でも(max-width: 400px)の方の大きさを適応したいのですが、max-width: 500pxの大きさが適応されてしまいます。

入力フォームの横幅width: 92%;をレスポンシブ対応(max-width: 400px)で適応したいのですが、
(max-width: 500px)で指定したwidth: 73%;が適応されてしまいます。

試したこと
(max-width: 400px)を(min-width: 400px)にしてみたのですが、(min-width: 400px)にすると .flex3{
flex-direction: column;をスマホのサイズの場合のみ指定したくて指定のですが、PCサイズでも適応されてしまうため、max-widthにしています。

今までレスポンシブ対応ではmin-width:で書いていたのでmin-width:で書きたいのが本音なのでが。

クロームのディベロッパーツールを使っています。

html
1<!DOCTYPE html> 
2
3<html lang="ja">
4
5<head>
6<meta content="text/html; charset=utf-8"/>
7<meta name="viewport" content="width=device-width, initial-scale=1">
8<link rel="stylesheet" href="reset.css">
9<link rel="stylesheet" href="ppage1.css">
10<link rel="stylesheet" href="responsive.css">
11
12 <title>LPページ　初期申込フォーム</title> 
13 <style type="text/css">
14
15
16 /* 入力フォームの位置 */     
17 .auto-style1 {
18     margin: auto;
19     text-align: center;
20   }
21
22/* wrap50は左右の両脇に背景色を追加するコード*/ 
23.wrap50 {
24            width: 100%;
25            margin: 0 auto;
26            background: rgb(42, 236, 17);
27        }
28
29/* 画像と文字の背景色の設定 */
30.wrap01 {
31            width: 80%;/* 残りの２０％はwrap50で指定した背景色になる */
32            margin: 0 auto;
33            background:white;
34        }
35
36/* 画像と文字の背景色の設定 */
37.wrap02 {
38            width: 80%;/* 残りの２０％はwrap50で指定した背景色になる */
39            margin: 0 auto;
40            background: white;
41        }
42</style>
43
44</head>
45<body>
46
47<div class="wrap50">
48<!--wrap50左右の両脇に背景色を追加-->
49
50
51<div class="wrap01">
52  <!--画像と文字の背景色の設定-->
53  <div class="flex3">
54        
55          <img src="humenn1.PNG" alt="［写真］" class="example20"> 
56     
57      <div class="title3">
58          <p>私は台湾出身です。</p>
59          <p class="kuuhaku2"></p><!--空白の設定-->
60          <div>
61            テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、
62テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、
63テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、
64テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、
65          </div>
66         
67
68             
69            </div>
70          </div>   
71        </div> 
72
73        <div class="wrap02">
74       
75        <div class="flex3">   
76           
77               <img src="humenn2.PNG" alt="［写真］" class="example20">
78           
79            <div class="title3">
80                <p>私は香港出身です。
81                </p>
82                <p class="kuuhaku2"></p><!--空白の設定-->
83                <div>
84                  テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、
85                  テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、
86                  テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、
87                  テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、
88                    </div>
89 </div>
90</div>          
91</div>
92
93
94
95<form action ="▽▽" method ="post">
96
97  <div class="auto-style1">
98
99    <p class="px-num"> 
100名前：※
101    </p>
102<input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>"/>
103
104</form>
105</body></html>
106

css
1 /* 空白の設定 */
2.kuuhaku2{
3  margin-top: 25px;
4}
5/* 画像の横の説明文の設定 */
6.title3 div{
7
8 
9 
10  font-size: 20px;
11  color: rgb(68, 68, 68);
12  letter-spacing: 0.1em;/* 文字と文字の横の余白 */
13  line-height:32px;
14}
15
16/* 画像の横に文字を配置する */
17.flex3{
18  display: flex;/* 画像の横に文字を配置する */
19  padding: 10px;
20  width: 1000px;/* 文字の列数を横に多くする */
21  margin: 0 auto;
22  justify-content: start;
23  align-items: center;
24}
25.flex3>div{
26 
27  margin: 10px;
28  padding: 10px;
29}
30
31/* 画像の横にタイトル） */
32.title3 p{
33margin: 8px;
34font-size: 34px;
35line-height:45px;
36
37color:rgb(30, 13, 189);
38}
39/* 画像の大きさ調節 */
40img.example20{
41 
42 
43  height: 160px;
44 
45}
46
47
48/* pxで指定 入力フォーム文字サイズ、太さ*/
49.px-num{
50  line-height: 40px;/* 文字の行間 */
51  font-size: 26px;/* 文字の大さ */
52  font-weight: 900;/* 文字の太さ */
53  text-align: center;/* 文字を中央に配置 */
54  color: #63e02d;
55}
56
57/* 入力フォームのスタイル */
58#name {
59	margin:0 auto; 
60	 text-align: center;
61    border: 3px solid #63e02d;  /* 枠線 */
62    background-color: snow;  /* 背景色 */
63    width: 29.3em;             /* 横幅 */
64    height: 56px;           /* 高さ */
65    font-size: 1em;          /* テキスト内の表示文字サイズ */
66    line-height: 1.2;         /* 行の高さ */
67    box-sizing: border-box;/* レスポンシブ対応中央 */
68}
69

responsivecss
1
2/* 画面幅（400px以下の時までの適応）指定 */
3@media screen and (max-width: 400px){
4
5/* 空白の設定 */
6  .kuuhaku2{
7  margin-top: 25px;
8  }
9  /* 画像の横の説明文の設定 */
10  .title3 div{
11
12  
13  font-size: 17px;
14  color: rgb(68, 68, 68);/* 文字の色 */
15  letter-spacing: 0.1em;/* 文字と文字の横の余白 */
16  line-height:28px;
17  }
18  
19  /* 画像の横に文字を配置する */
20  .flex3{
21  
22 
23  flex-direction: column;/* スマホで画像、タイトル、文章を縦表示max-widthでなければ何故かｐｃ表示の大きさ
24  に個別に指定しても真ん中に配置される。なので、min-widthからmax-eidthにしています。 */
25  display: flex;/* 画像の横に文字を配置する */
26  
27
28  padding-top: 5px;
29  padding-right: 5px;
30  padding-bottom: 5px;
31  padding-left: 1px;
32 
33  
34  
35  width: 300px;/* 文字の列数を横に多くするスマホサイズに合わせる縮小 */
36  margin: 0 auto;
37  justify-content: start;
38  align-items: center;
39  }
40  .flex3>div{
41  
42  margin: 10px;
43  padding: 10px;
44  }
45  /* 画像の横に文字のスタイル(タイトル） */
46  .title3 p{
47  margin: 8px;
48  font-size: 21px;
49  line-height:30px;
50 
51  color:rgb(30, 13, 189);
52  }
53
54  /* 画像の大きさ調節 */
55  img.example20{
56  height: 160px;
57  
58  }
59
60 /* 入力フォーム */
61 #name {
62    height: 38px; 
63    width: 92%;
64    font-size: 1em;   /* テキスト内の表示文字サイズ */
65   }
66/* pxで指定 入力フォーム文字サイズ、太さ*/
67.px-num{
68    font-size: 17px;/* 文字の大さ */
69
70}
71} 
72
73
74/* 画面幅（500px以下の時までの適応）指定 */
75@media screen and (max-width: 500px){
76
77/* 空白の設定 */
78.kuuhaku2{
79margin-top: 25px;
80}
81/* 画像の横の説明文の設定 */
82.title3 div{
83
84
85
86font-size: 17px;
87color: rgb(68, 68, 68);/* 文字の色 */
88letter-spacing: 0.1em;/* 文字と文字の横の余白 */
89line-height:28px;/* 行間の高さ */
90}
91
92/* 画像の横に文字を配置する */
93.flex3{
94
95
96flex-direction: column;/* スマホで画像、タイトル、文章を縦表示max-widthでなければ何故かｐｃ表示の大きさ
97に個別に指定しても真ん中に配置される。なので、min-widthからmax-eidthにしています。 */
98display: flex;/* 画像の横に文字を配置する */
99
100
101padding-top: 5px;
102padding-right: 5px;
103padding-bottom: 5px;
104padding-left: 1px;
105
106
107
108width: 300px;/* 文字の列数を横に多くするスマホサイズに合わせる縮小 */
109margin: 0 auto;
110justify-content: start;
111align-items: center;
112}
113.flex3>div{/*セレクタを.flex直下のdivだけに適用する形の「.flex>div」とする（title3 divを適応させるため） */
114
115margin: 10px;
116padding: 10px;
117}
118/* 画像の横に文字のスタイル(タイトル） */
119.title3 p{
120margin: 8px;
121font-size: 21px;
122line-height:30px;
123
124color:rgb(30, 13, 189);
125}
126/* 画像の大きさ調節 */
127img.example20{
128
129
130height: 160px;
131
132}
133
134/* 入力フォーム */
135   #name {
136 
137         width: 73%;
138         border: 3px solid #63e02d;  /* 枠線 */
139      height: 43px;
140      font-size: 1.1em;   /* テキスト内の表示文字サイズ */
141      
142     
143        }
144  /* pxで指定 入力フォーム文字サイズ、太さ*/
145    .px-num{
146         font-size: 17px;/* 文字の大さ */
147    }
148    
149      }
150