レスポンシブ対応が上手くいかない

学習サイトを見てHTML CSSの勉強中ですが通常レイアウトは上手くできましたが上の画像のように479までの場合のレスポンシブ対応を配置したいのですが何回修正してもどうしても上手くいかなくて困ってます。　原因はなぜなのでしょうか？

HTML
1コード<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7    <title>o</title>
8    <link rel="stylesheet" href="curriculum.css">
9    
10    
11    
12</head>
13<body>
14    <div class="wrapper">
15        <div class="header"></div>
16        <div class="top-1 boxs">
17        </div>
18        <div class="top-2 boxs"></div>
19        <div class="top-3 boxs"> </div>
20            <div class="main clearfix">
21              <div class="main-left">  </div>
22              <div class="main-right clearfix">
23                <div class="box-a box">
24                </div>
25                <div class="box-b box"></div>
26                <div class="box-c box"></div>
27                </div>
28            </div>
29          <div class="footer"></div>
30    </div>
31     </body>
32    </html>
33```ここに言語を入力css
34コード
35```body {
36  margin: 0;
37  display: block;
38}
39
40.wrapper {
41  position: absolute;
42  top: 0;
43  right: 0;
44  bottom: 0;
45  left: 0;
46  width: 400px;
47  height: 450px;
48  margin: auto;
49}
50
51.clearfix::after {
52    content: "";
53    display: block;
54    clear: both;
55    
56}
57
58.header {
59  background-color: #141f40;
60  height: 100px;
61  width: 400px;
62  position: absolute;
63}
64
65.boxs {
66  background-color:#a9004b;
67  width: 40px;
68  height: 40px;
69  float: right;
70  right:25px;
71  position: relative;
72  border: solid  8px #FFFFFF;
73
74  
75}
76
77.top-1 {
78  position: relative;
79  top:20px;
80  bottom:10px;
81  
82}
83
84
85.top-2 {
86  position: relative;
87  top:20px;
88 
89 
90
91}
92
93.top-3 {
94  position: relative;
95  top:20px;
96  bottom:30px;
97  
98  
99}
100
101
102
103.main-left {
104  width: 150px;
105  height: 250px;
106  float: left;
107  background-color: #80bfa8;
108  clear: both;
109}
110
111.main-right {
112  height: 250px;
113  width: 250px;
114  background-color: #8c2727;
115  float: left;
116  
117}
118
119.box{
120  background-color: #ff863f;
121  width: 140px;
122  height: 40px;
123  position: absolute;
124  left: 40px;
125  right: 60px;
126  border:5px solid #FFFFFF ;
127  display: inline-block;
128}
129
130.box-a{
131  position: relative;
132  top: 60px;
133  bottom:5px;
134 
135}
136
137 
138}
139
140.box-b{
141  position: relative;
142  top:65px;
143  bottom:10px;
144}
145
146.box-c{
147  position: relative;
148  top: 70px;
149  bottom: 20px;
150}
151
152
153
154.footer {
155  height: 100px;
156  background-color: #d98d30;
157  width: 400px;
158  clear: both;
159}
160
161
162
163```レスポンシブ対応
164コード
165@media screen and (max-width: 479px) {
166 
167  .wrapper {
168    width: 270px;
169    margin: auto;
170    
171  }
172
173  .header {
174    width:270px;
175    height: 150px;
176    background-color: #141f40;
177  }
178
179  .main-left {
180    width: 270px;
181    height: 100px;
182    background-color:#80bfa8;
183   
184  
185  }
186
187  .main-right {
188    width:270px;
189    height:100px;
190    background-color:#8c2727;
191   
192  }
193  .footer{
194    width: 270px;
195    height:100px;
196    background-color:#d98d30;
197  }
198
199}

Lhankor_Mhy

2020/11/12 01:27

「上手くいかなくて困ってます」とのことですが、具体的にはどのような問題が起きていますか？結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1 期待した処理結果を書きましょう https://teratail.com/help/question-tips#questionTips3-4-3 表現するための言葉がわからない時は表現の仕方を工夫しましょう https://teratail.com/help/question-tips#questionTips3-3-1