ヘッダーを固定した際の重なり

HTML CSSを使ってisaraのサイトを模写練習中です。

ヘッダーを固定した際に、ヘッダーの高さ分の空白が出来ずにhomeのclassとヘッダーが重なってしまいます。
以前に模写した際にはfixedとzindexのみで出来たのでcssとhtmlをいじるだけで解決するはずなのですが、どうしても自分では出来ません。
原因と解決策を教えて頂きたいです。
お願いします。

html
1
2<!DOCTYPE html>
3<html>
4  <head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width,initial-scale=1.0">
7    <title>iSara[イサラ]｜バンコクのノマドエンジニア育成講座</title>
8    <link rel="stylesheet" href="stylesheet.css">
9    <link href="https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap" rel="stylesheet">
10    <link rel="icon" href="img/favicon.ico">
11    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
12    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
13    <script type="text/javascript" src="js/script.js"></script>
14    <script src="https://kit.fontawesome.com/646ee2a69d.js" crossorigin="anonymous"></script>
15  </head>
16
17  <body>
18        <div class="header-main">
19             <div class="header-title">
20               <div class="logo">
21                 <img  src="img/isaralogo.png" alt="イサラのロゴ">
22               </div>
23               <div class="subtitle">
24               <p> バンコクのノマドエンジニア育成講座</p>
25               </div>
26             </div>
27             <div id="header-btn" ><p>お問い合わせ / 資料請求はこちら</p></div>
28           </div>
29
30 <p id="pageTop"><a href="#"><i class="fa fa-chevron-up"></i></a></p>
31
32        <div  class="home">
33          <div class="text">
34            <p>プログラミングで</p>
35            <p>人生の安定を手に入れよう</p>
36          </div>
37          <img class="home-logo" src="img/isaralogolarge.png" alt="">
38            <div class="text-bottom">
39              <p> バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</p>
40
41            </div>
42        </div>
43</body>
44    </html>

CSS
1* { margin: 0; padding: 0; box-sizing: border-box; }
2
3.header-main { height: 75px; width: 100%; background-color: white; align-items: baseline; position: fixed; z-index: 50; }
4
5.header-title { margin: 0 366.5px; padding: 20px 0; width: 100%; display: flex; align-items: baseline; position: relative; }
6
7.header-title .logo { margin-top: -6px; }
8
9.header-title img { width: 128px; vertical-align: bottom; }
10
11.subtitle { display: inline-block; }
12
13.subtitle p { font-size: 14px; font-weight: bold; display: inline-block; }
14
15#header-btn { padding: 11px 40px; background-color: #da6b64; border-radius: 50px; position: absolute; bottom: 16px; right: 366.5px; }
16
17#header-btn p { font-size: 14px; color: white; }
18
19.home { background-image: url(img/main.jpg); background-size: 100%; background-position: center center; height: 500px; text-align: center; padding: 90px 0; }
20
21.home .text { font-size: 28px; font-weight: 600; letter-spacing: 0.1em; line-height: 1.6; }
22
23.home .text p { margin-bottom: 10px; }
24
25.home .home-logo { width: 317px; margin-bottom: 20px; }
26
27.home .text-bottom { font-size: 20px; font-weight: 600; letter-spacing: 0.1em; line-height: 1.6; }
28
29