レスポンシブデザインが反応しな

レスポンシブデザインが効きません。

!importantを使わないと反応しません。
何が間違えているのでしょうか？

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width,initial-scale=1">
6  <link rel="stylesheet" href="css/styles.css">
7  <title>Header</title>
8
9</head>
10<body>
11  <header>
12    <img src="img/logo.png">
13    <div class="contants">
14      <ul class="header-menu">
15        <li><a href="#">Card</a></li>
16        <li><a href="#">News</a></li>
17        <li><a href="#">Price</a></li>
18        <li><a href="#">Access</a></li>
19        <li><a href="#">Contact</a></li>
20      </ul>
21    </div>
22  </header>
23
24  <section class="hello">
25    <div class="inner">
26      <h1>一番伝えたいことを書く</h1>
27      <p>リードリードリード</p>
28      <div class="btn"><a href="#">お問い合わせ</a></div>
29    </div>
30  </section>
31
32  <section class="card">
33    <div class="inner">
34      <h1>Card</h1>
35      <div class="contants">
36        <div class="box">
37          <div class="img"></div>
38          <h3>タイトルタイトル</h3>
39          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
40        </div>
41    
42        <div class="box">
43          <div class="img"></div>
44          <h3>タイトルタイトル</h3>
45          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
46        </div>
47    
48        <div class="box">
49          <div class="img"></div>
50          <h3>タイトルタイトル</h3>
51          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
52        </div>
53    
54        <div class="box">
55          <div class="img"></div>
56          <h3>タイトルタイトル</h3>
57          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
58        </div>
59    
60        <div class="box">
61          <div class="img"></div>
62          <h3>タイトルタイトル</h3>
63          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
64        </div>
65    
66        <div class="box">
67          <div class="img"></div>
68          <h3>タイトルタイトル</h3>
69          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
70        </div>
71      </div>
72    </div>
73  </section>
74  
75  <script src="js/main.js"></script>
76</body>
77</html>
78
79

該当のソースコード

css
1@charset "UTF-8";
2* {
3  box-sizing: border-box;
4}
5
6html {
7  margin: 0;
8  font-family: Yu Gothic;
9  height: 100%;
10}
11
12html body {
13  margin: 0;
14  font-family: Yu Gothic;
15}
16
17html body header {
18  width: 100%;
19  background-color: #3F51B5;
20  height: 100px;
21}
22
23html body header img {
24  float: left;
25  margin: 30px 0px 30px 140px;
26}
27
28html body header .header-menu {
29  text-align: right;
30  margin: 0;
31  padding-right: 140px;
32  line-height: 100px;
33}
34
35html body header li {
36  display: inline;
37  margin-left: 30px;
38}
39
40html body header li a {
41  color: #fff;
42  text-decoration: none;
43  position: relative;
44}
45
46html body header li a::after {
47  position: absolute;
48  left: 0;
49  top: 16px;
50  content: '';
51  width: 100%;
52  height: 2px;
53  background: #E81919;
54  opacity: 0;
55  transition: .3s;
56}
57
58html body header li a:hover::after {
59  opacity: 1;
60}
61
62html body .hello {
63  height: 600px;
64  background-image: url("/Users/nozomi/Desktop/デイトレ/header/img/mainvisual.png");
65  background-size: cover;
66  background-position: center;
67}
68
69html body .hello .inner {
70  width: 800px;
71  max-width: 100%;
72  margin: 0px auto 0;
73  padding: 10px;
74  text-align: center;
75  padding: 149px 10px 0px;
76}
77
78html body .hello .inner h1 {
79  font-size: 68px;
80  margin-bottom: 12px;
81  font-weight: normal;
82}
83
84html body .hello .inner p {
85  font-size: 38px;
86  margin: 0;
87  font-weight: bold;
88}
89
90html body .hello .inner .btn {
91  width: 390px;
92  margin: 82px auto 0;
93  font-size: 38px;
94  background: #3F51B5;
95  border-radius: 4px;
96  padding: 17px 81px;
97}
98
99html body .hello .inner .btn a {
100  text-decoration: none;
101  color: #fff;
102}
103
104html body .card {
105  background: #EFEFEF;
106  margin: 0;
107  text-align: center;
108}
109
110html body .card .inner {
111  width: 100%;
112  max-width: 100%;
113  margin: 0px auto;
114  text-align: center;
115  padding: 0px 140px;
116}
117
118html body .card .inner h1 {
119  font-size: 60px;
120  position: relative;
121  font-weight: bold;
122  width: 150px;
123  margin: auto;
124  padding-top: 68px;
125}
126
127html body .card .inner h1::after {
128  position: absolute;
129  left: 45px;
130  top: 190px;
131  content: '';
132  width: 50%;
133  height: 5px;
134  background: #3F51B5;
135  opacity: 1;
136}
137
138html body .card .inner .contants {
139  display: flex;
140  flex-wrap: wrap;
141  margin: 113px 0 0;
142}
143
144html body .card .inner .contants .box {
145  background: #fff;
146  height: 355px;
147  text-align: center;
148  padding: 16px;
149  margin: 0 30px 20px 0;
150  width: calc(33.33333% - 20px);
151}
152
153html body .card .inner .contants .box:nth-child(3n) {
154  margin-right: 0;
155}
156
157html body .card .inner .contants .box .img {
158  background: #DDDDDD;
159  width: 100px;
160  height: 100px;
161  margin: 0 auto;
162}
163
164@media screen and (max-width: 768px) {
165  header ul {
166    display: none !important;
167  }
168  header img {
169    margin: 30px 0px 30px 30px !important;
170  }
171  .inner h1 {
172    font-size: 37px !important;
173  }
174  .inner .btn {
175    width: auto !important;
176    padding: 0 !important;
177  }
178  .card .contants .box {
179    width: calc(50% - 30px);
180  }
181  .card .contants .box:nth-child(3n) {
182    margin-right: 30px;
183  }
184  .card .contants .box:nth-child(2n) {
185    margin-right: 0px;
186  }
187}
188