レスポンシブの値が適応されない。

実現したいこと
レスポンシブで左右に出る緑の背景の幅の広さが適応されません。該当コードはresponsinecssの.wrap01 {
width: 80%;と
.wrap02 {
width: 80%;
の所なのですが、ここを width: 90%;に変更すると、左右の緑背景の幅が狭くなるはずなのですが、
@media screen and (max-width: 800px){
@media screen and (max-width: 500px){
@media screen and (max-width: 400px){
とどのレスポンシブサイズでも値を変更しても適応されません。原因は何でしょうか。

緑の背景とは付属画像にある左右の背景色のことです
付属画像

試したこと
提示してあるhtmlコードPCサイズではきちんと.wrap01 {
width: 80%;から90%に変更すると左右の緑色の背景の幅がきちんと適応されています。

ちなみに、@media screen and (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>初期申込フォーム</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</form>
94</body></html>
95
96
97

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}

responsinecss
1
2/* 画面幅（800px以下の時までの適応）指定 */
3@media screen and (max-width: 800px){
4
5/* wrap50は左右の両脇に背景色を追加するコード*/ 
6.wrap50 {
7  width: 100%;
8  margin: 0 auto;
9  background: rgb(42, 236, 17);
10}
11
12/* 画像と文字の背景色の設定 */
13.wrap01 {
14  width: 80%;/* 残りの２０％はwrap50で指定した背景色になる */
15  margin: 0 auto;
16  background:white;
17}
18
19/* 画像と文字の背景色の設定 */
20.wrap02 {
21  width: 80%;/* 残りの２０％はwrap50で指定した背景色になる */
22  margin: 0 auto;
23  background: white;
24}
25
26 /* 空白の設定 */
27.kuuhaku2{
28  margin-top: 25px;
29}
30/* 画像の横の説明文の設定 */
31.title3 div{
32/* class="title3"の要素の子孫要素になっているdiv要素 */
33 
34 
35  font-size: 17px;
36  color: rgb(68, 68, 68);/* 文字の色 */
37  letter-spacing: 0.1em;/* 文字と文字の横の余白 */
38  line-height:32px;/* 行間の高さ */
39}
40
41/* 画像の横に文字を配置する */
42.flex3{
43  display: flex;/* 画像の横に文字を配置する */
44  padding: 10px;
45  width: 600px;/* 文字の列数を横に多くする */
46  margin: 0 auto;
47  justify-content: start;
48  align-items: center;
49}
50.flex3>div{/*セレクタを.flex直下のdivだけに適用する形の「.flex>div」とする（title3 divを適応させるため） */
51 
52  margin: 10px;/* 外側の空白上下左右 ????にする*/
53  padding: 10px;/* 内側の空白上下左右????にする */
54}
55/* 画像の横に文字のスタイル(タイトル） */
56.title3 p{
57margin: 8px;
58font-size: 26px;
59line-height:45px;/* 文字を大きくして中央に配置するための処置 */
60font-family: "ＭＳ ゴシック",sans-serif; /* 文字の種類 */
61color:rgb(30, 13, 189);
62}
63/* 画像の大きさ調節 */
64img.example20{
65 
66 
67  height: 130px;
68 
69}
70
71
72    }

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

回答1件

ベストアンサー

CSSは「後書き優先」の原則がありますので、先に書いたものを変更しても後から上書きされていると、効果は表れないです。

html
1<link rel="stylesheet" href="responsive.css">
2<!-- ↑これよりも、-->
3 <style type="text/css">
4
5
6 /* ... */
7
8.wrap02 {
9            width: 80%; /* ←こっちの方が後 */ 
10            margin: 0 auto;
11            background: white;
12        }