【レスポンシブデザイン】背景画像が要素内の本文と重ならない。

前提

実現したいこと

-背景画像の上に本文（CONTACTフォーム）を重ねたい。

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

複数ページからなるWebサイトを制作しているのですが、「contact.html」のみ、本文（CONTACTフォーム）が、background-imageの画像の下に表示されてしまいます。他のページでは、本文はbackground-imageの画像の上に重なって正常に表示されています。

色々調べましたがどうも改善できそうにないのでどなたかお力を貸していただけないでしょうか？
画像はPCでみた場合の現在の状態です。

HTML・CSSともに長くなりますがどこが原因かわからないのですべて記述してあります。ご容赦ください。
よろしくお願いいたします。

該当のソースコード

contact.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    <title>WCB Cafe - CONTACT</title>
7    <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
8
9  <!-- CSS -->
10    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
11    <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
12    <link href="css/style.css" rel="stylesheet">
13    <link rel="icon" type="image/png" href="img/favicon.png">
14  </head>
15
16  <body>
17    <div id="contact" class="big-bg">
18      <header class="page-header wrapper">
19        <h1><a href="index.html"><img class="logo" src="img/logo.svg" alt="WCBカフェ ホーム"></a></h1>
20        <nav>
21          <ul class="main-nav">
22            <li><a href="news.html">News</a></li>
23            <li><a href="menu.html">Menu</a></li>
24            <li><a href="contact.html">Contact</a></li>
25          </ul>
26        </nav>
27      </header>
28     
29    </div><!-- /#home -->
30    
31    <div class="wrapper">
32      <h2 class="page-title">Contact</h2>
33      <form action="#">
34        <div>
35          <label for="name">お名前</label>
36          <input type="text" id="name" name="your-name">
37        </div>
38
39        <div>
40          <label for="email">メールアドレス</label>
41        </div>
42
43        <div>
44          <label for="message">メッセージ</label>
45          <textarea id="message" name="your-message"></textarea>
46        </div>
47
48        <input type="submit" class="button" value="送信">
49      </form>
50    </div><!-- /.wrapper -->
51
52    <footer>
53      <div class="wrapper">
54        <p><small>&copy; 2019 Manabox</small></p>
55      </div>
56    </footer>
57  </body>
58</html>

style.css
1@charset "UTF-8";
2
3/* 共通部分 */
4
5html {
6  font-size: 100%;
7}
8
9body {
10  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
11  line-height: 1.7;
12  color: #432;
13}
14
15a {
16  text-decoration: none;
17}
18
19img {
20  max-width: 100%;
21}
22
23/* HEADER */
24
25.logo {
26  width: 210px;
27  margin-top: 14px;
28}
29
30.main-nav {
31  display: flex;
32  font-size: 1.25rem;
33  text-transform: uppercase;
34  margin-top: 34px;
35  list-style: none;
36}
37
38.main-nav li {
39  margin-left: 36px;
40}
41
42.main-nav a {
43  color: #432;
44}
45
46.main-nav a:hover {
47  color: #0bd;
48}
49
50.page-header {
51  display: flex;
52  justify-content: space-between;
53}
54
55.wrapper {
56  max-width: 1100px;
57  margin: 0 auto;
58  padding: 0 4%;
59}
60
61/* HOME */
62
63.home-content {
64  text-align: center;
65  margin-top: 10%;
66}
67
68.home-content p {
69  font-size: 1.125rem;
70  margin: 10px 0 42px;
71}
72
73/* 見出し */
74
75.page-title {
76  font-size: 5rem;
77  font-family: 'Philosopher', serif;
78  text-transform: uppercase;
79  font-weight: normal;
80}
81
82/* ボタン */
83
84.button {
85  font-size: 1.375rem;
86  background: #0bd;
87  color: #fff;
88  border-radius: 5px;
89  padding: 18px 32px;
90}
91
92.button:hover {
93  background: #0090aa;
94}
95
96/* 大きな背景画像 */
97.big-bg {
98  background-size: cover;
99  background-position: center top;
100}
101
102#home {
103  background-image: url(../img/main-bg.jpg);
104  min-height: 100vh;
105}
106
107#home .page-title {
108  text-transform: none;
109}
110
111/* NEWS */
112
113#news {
114  background-image: url(../img/news-bg.jpg);
115  height: 270px;
116  margin-bottom: 40px;
117}
118
119#news .page-title {
120  text-align: center;
121}
122
123/* フッター */
124
125footer {
126  background: #432;
127  text-align: center;
128  padding: 26px 0;
129}
130
131footer p {
132  color: #fff;
133  font-size: 0.875rem;
134}
135
136/* 記事部分 */
137article {
138  /*width: 74%;*/
139  width: 60%;
140  order: 2;
141}
142
143/* サイドバー */
144aside {
145  width: 22%;
146  order: 3;
147}
148
149.ad {
150  order: 1;
151}
152
153.news-contents {
154  display: flex;
155  justify-content: space-between;
156  margin-bottom: 50px;
157}
158
159.post-info {
160  position: relative;
161  padding-top: 4px;
162  margin-bottom: 40px;
163}
164
165.post-date {
166  background: #0bd;
167  border-radius: 50%;
168  color: #fff;
169  width: 100px;
170  height: 100px;
171  font-size: 1.625rem;
172  text-align: center;
173  position: absolute;
174  top: 0;
175  padding-top: 10px;
176}
177
178.post-date span {
179  font-size: 1rem;
180  border-top: 1px rgba(255,255,255,.5) solid;
181  padding-top: 6px;
182  display: block;
183  width: 60%;
184  margin: 0 auto;
185}
186
187.post-title {
188  font-family: "Yu Mincho", "YuMincho", serif;
189  font-size: 2rem;
190  font-weight: normal;
191}
192
193.post-title,
194.post-cat {
195  margin-left: 120px;
196}
197
198article img {
199  margin-bottom: 20px;
200}
201
202article p {
203  margin-bottom: 1rem;
204}
205
206.sub-title {
207  font-size: 1.375rem;
208  padding: 0 8px 8px;
209  border-bottom: 2px #0bd solid;
210  font-weight: normal;
211}
212
213aside p {
214  padding: 12px 10px;
215}
216
217.sub-menu {
218  margin-bottom: 60px;
219  list-style: none;
220}
221
222.sub-menu li {
223  border-bottom: 1px #ddd solid;
224}
225
226.sub-menu a {
227  color: #432;
228  padding: 10px;
229  display: block;
230}
231
232.sub-menu a:hover {
233  color: #0bd;
234}
235
236/* MENU */
237
238#menu {
239  background-image: url(../img/menu-bg.jpg);
240  min-height: 100vh;
241}
242
243.menu-content {
244  max-width: 560px;
245  margin-top: 10%;
246}
247
248.menu-content .page-title {
249  text-align: center;
250}
251
252.menu-content p {
253  font-size: 1.125rem;
254  margin: 10px 0 0;
255}
256
257.grid {
258  display: grid;
259  gap: 26px;
260  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
261  margin-top: 6%;
262  margin-bottom: 50px;
263}
264
265.big-box {
266  grid-column: 1 / 3;
267  grid-row: 1 / 3;
268}
269
270.big-box img {
271  height: 94%;
272  width: 100%;
273  object-fit: cover;
274}
275
276/* CONTACT */
277#contact {
278  background-image: url(../img/contact-bg.jpg);
279  min-height: 100vh;
280}
281
282/* フォーム */
283form div {
284  margin-bottom: 14px;
285}
286
287/* モバイル版 */
288
289@media (max-width: 600px) {
290  .page-title {
291    font-size: 2.5rem;
292  }
293
294  /* HEADER */
295  .main-nav {
296    font-size: 1rem;
297    margin-top: 10px;
298  }
299  .main-nav li {
300    margin: 0 20px;
301  }
302
303  /* HOME */
304  .home-content {
305    margin-top: 20%;
306  }
307
308  .page-header {
309    flex-direction: column;
310    align-items: center;
311  }
312
313  /* NEWS */
314  .news-contents {
315    flex-direction: column; 
316  }
317  article,
318  aside {
319    width: 100%;
320  }
321
322  #news .page-title {
323    margin-top: 30px;
324  }
325  
326  aside {
327    margin-top: 60px;
328  }
329
330  .post-info {
331    margin-bottom: 30px;
332  }
333
334  .post-date {
335    width: 70px;
336    height: 70px;
337    font-size: 1rem;
338  }
339
340  .post-data span {
341    font-size: 0.875rem;
342    padding-top: 2px;
343  }
344
345  .post-title {
346    font-size: 1.375rem;
347  }
348
349  .post-cat {
350    font-size: 0.875rem;
351    margin-top: 10px;
352  }
353  .post-title,
354  .post-cat {
355    margin-left: 80px;
356  }
357
358  .ad {
359    display: none;
360  }
361
362  /* MENU */
363  .menu-content {
364    margin-top: 20%;
365  }
366
367  .big-box {
368    grid-column: auto;
369    grid-row: auto;
370  }
371
372  .big-box img {
373    height: auto;
374  }
375}