レスポンシブサイトの不具合で困っています。

前提・実現したいこと

現在、コーディング練習をしているところなのですが、
レスポンシブサイトにて横幅指定、中央揃えがうまくできません。

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

メディアクエリにて767pxで横幅指定をしているのですが、610pxくらいでレスポンシブサイトに適応します。
またレスポンシブサイトではヘッダーメニューが中央揃えにならないので、是非ご回答いただければ幸いです。

該当のソースコード

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.0">
6  <link rel="icon" href="favicon.ico">
7  <link rel="stylesheet" href="./css/reset.css">
8  <link rel="stylesheet" href="./css/style.css">
9  <title>デイトラ | 無料体験</title>
10</head>
11<body>
12    <header>
13        <h1>
14          30DAYSトライアル
15        </h1>
16        <nav>
17          <ul>
18            <li><a href="#">デイトラとは</a></li>
19            <li><a href="#">コース一覧</a></li>
20            <li><a href="#">お問い合わせ</a></li>
21          </ul>
22        </nav>
23    </header>
24
25    <div class="header_img">
26      <p class="header_upper">
27        1日1題30日で<br>
28        プロのWebエンジニアになろう！
29      </p>
30      <p class="header_bottom">
31          毎日設定された課題をこなすだけ！<br class="kaigyo">未経験から30日でプログラミングスキルが身につきます
32      </p>
33    </div>
34  <div class="container">
35      
36    <h2>デイトラとは</h2>
37    <div class="about">
38      <div class="about_left">
39        <img src="./img/about.png" alt="デイトラとは">
40      </div>
41      <div class="about_right">
42        <p>
43          デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。<br>
44          1日1題30日でプロのWebエンジニアを目指しましょう！
45        </p>
46      </div>
47    </div>
48    <div class="kuhaku"></div>
49    <h2>コース一覧</h2>
50    <div class="course">
51      <div class="course_item">
52         <img src="./img/web_first.png" alt="初級コース">
53         <p class="course_setsumei">
54          HTML / CSS / Bootstrap
55        </p>
56      </div>
57      <div class="course_item">
58        <img src="./img/web_second.png" alt="中級コース">
59        <p class="course_setsumei">
60          HTML /CSS / JavaScript / JQuery
61        </p>
62      </div>
63      <div class="course_item">
64        <img src="./img/web_third.png" alt="上級コース">
65        <p class="course_setsumei">
66          PHP / WordPress
67        </p>
68      </div>
69    </div>
70
71    <div class="kuhaku"></div>
72
73    
74      <h2>お問い合わせ</h2>
75      <p>さあ今日から30日間を始めよう!</p>
76      
77      <form action="#" method="post">
78        <input type="email" name="email" placeholder="メールアドレス" class="email">
79        <p>
80          <a href="#"><button type="submit" class="buttom">無料ではじめる</button></a>
81        </p>
82      </form>
83    
84
85    <footer>
86      Copyright(C) 2020 東京フリーランス ALL Rights Reserved.
87    </footer>
88
89  </div>
90</body>
91</html>

CSS
1body {
2  text-align: center;
3  color: #082b48;
4  font-family: Verdana, Geneva, Tahoma, sans-serif;
5  line-height: 1.5;
6}
7
8img {
9  width:100%;
10  height: auto;
11 }
12
13header {
14  width: 90%;
15  max-width: 980px;
16  height: 76px;
17  display: flex;
18  margin: 0 auto;
19}
20
21h1 {
22  font-size: 24px;
23  font-weight: 900;
24  margin: auto 0;
25}
26
27nav {
28  margin-left: auto;
29}
30
31nav ul {
32  list-style: none;
33  margin: 0;
34  padding: 0;
35  display: flex;
36}
37
38nav li {
39  width: 134px;
40  text-align: center;
41  line-height: 76px;
42}
43
44nav a {
45  text-decoration: none;
46  font-size: 15px;
47  font-weight: 600;
48  color: #082b48;
49}
50
51a:hover {
52  opacity: 0.7;
53  cursor: pointer;
54}
55
56.header_img {
57  background-image: url("../img/main-vsual-nontitle.png");
58  background-size: cover;
59  padding: 80px;
60}
61
62.header_upper {
63  margin-top: 35px;  
64  margin-bottom: 25px;
65  font-size: 45px;
66  font-weight: bold;
67}
68
69.header_bottom {
70  margin-top: 50px;
71  font-size: 16px;
72  font-weight: bold;
73  width: 350px;
74  margin: 0 auto;
75}
76
77.kaigyo {
78  display: none;
79}
80
81.container {
82  width: 90%;
83  max-width: 980px;
84  margin: 0 auto;
85}
86
87h2 {
88  margin: 50px;
89  font-size: 30px;
90  font-weight: bold;
91}
92
93.about {
94  display: flex;
95  justify-content: space-between;
96}
97
98.about_left {
99  width: 48%;
100}
101
102.about_right {
103  width: 48%;
104  text-align: left;
105}
106
107.kuhaku {
108  height: 35px;
109}
110
111.course {
112  display: flex;
113  justify-content: space-between;
114}
115
116.course_item {
117  width: 30%;
118}
119
120.course_setsumei {
121  text-align: left;
122}
123
124.email {
125  width: 600px;
126  height: 50px;
127  border-radius: 30px;
128  font-size: 18px;
129  padding-left: 10px;
130  margin-bottom: 25px;
131}
132
133.buttom {
134  background-color: #EC6D64;
135  width: 42%;
136  height: 80px;
137  font-size: 25px;
138  font-weight: bold;
139  color: #fff;
140  border-radius: 10px;
141}
142
143.buttom:hover {
144  cursor: pointer;
145}
146
147footer {
148  border-top: 2px solid rgb(212, 212, 212);
149  margin-top: 130px;
150  margin-bottom: 30px;
151  padding-top: 15px;
152  float: right;
153  font-size: 13px;
154}
155
156/* スマホ */
157
158@media (max-width:767px) {
159  
160  header {
161    display: initial;
162  }
163
164  nav {
165    margin-left: none;
166    margin: 0 auto;
167  }
168
169  .header_img {
170    padding: 120px 0;
171  }
172
173  .header_bottom {
174    width: auto;
175  }
176
177  .kaigyo {
178    display: block;
179  }
180
181  .about {
182    margin: 0 auto;
183    display: initial;
184    justify-content: initial;
185  }
186
187  .about_left {
188    width: 90%;
189  }
190  
191  .about_right {
192    width: 90%;
193    text-align: left;
194  }
195
196  .course {
197    display: initial;
198    justify-content: initial;
199  }
200
201  .course_item {
202    width: 100%;
203  }
204
205  .course_setsumei {
206    text-align: left;
207    margin-bottom: 20px;
208  }
209
210  .email {
211    width: 90%;
212  }
213
214  footer {
215    float: none;
216  }
217
218
219}