divの開始位置がかぶってしまう問題について（position fixed)

前提・実現したいこと

isaraのホームページの模写コーディングを練習しています。
参考サイト
https://isara.life/

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

headerとtop-wrapperの部分においてなのですが、たぶんposition:fixed
を用いているせいで、divの開始位置が重なってしまっています。

質問内容
1.なぜこのような重なりが生じてしまうのか
2.position:fixedを用いた状態で重なりをなくすにはどうしたらいいか。
もしくはposition:fixedの代用となるcssは存在するか。

以上の2点についてお聞きしたいです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
10        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
11</head>
12
13<body>
14
15    <div class="header">
16        <div class="logo">
17            <img src="images/isaralogo.png" alt="isara" width=128px height=44.65px>
18            <p>バンコクのノマドエンジニア育成講座</p>
19        </div>
20
21        <div class="access">
22            <a href="#" class="access">お問い合わせ /　資料請求はこちら</a>
23        </div>
24    </div>
25
26    <!-- top-wrapper -->
27    <div class="top-wrapper">
28        <div class="container">
29            <div class="top-title1">
30                <p>プログラミングで<br>
31                    人生の安定を手にいれよう</p>    
32            </div>
33
34            <img src="images/isaralogolarge.png" alt="" width=317px height=111px>
35
36            <div class="top-title2">
37                <h1>バンコクのノマドエンジニア育成講座<br>
38                    iSara[イサラ]</h1>
39            </div>
40        </div>
41
42    </div>
43
44
45    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
46        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
47        crossorigin="anonymous"></script>
48    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
49        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
50        crossorigin="anonymous"></script>
51    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
52        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
53        crossorigin="anonymous"></script>
54</body>
55
56</html>

css
1*{
2    margin: 0px;
3    padding: 0px;
4}
5
6a{
7    display: inline-block;
8    text-decoration: none;
9}
10
11.header{
12    width:100%;
13    height: 75px;
14    display: flex;
15}
16
17.logo{
18    display: flex;
19    height: 100%;
20    margin: 13px 0px 10px 43px;
21}
22
23.logo p{
24    margin: auto 0 0 0;
25    margin-bottom: 33px;
26    margin-left: 10px;
27    font-size:14px;
28    font-weight:bold;
29    letter-spacing:2px;
30}
31
32
33
34.access {
35    margin: 0 0 0 auto;
36    margin-right: 50px;
37    display: flex;
38    align-items: center;
39    color: #ffffff;
40    font-size:14px;
41}
42
43/*border-radius :25px*/
44
45.access a{
46    padding: 11px 40px;
47    border-radius: 25px;
48    background: #da6b64;
49}
50
51.access a:hover{
52    text-decoration:none;
53    background: #d84940;
54    color: #fff;
55}
56
57.top-wrapper{
58    height: 500px;
59    background-image:url(images/top-wrapper.jpg);
60    background-size: cover;
61    background-position: center;
62    text-align:center;
63
64}
65
66
67.container{
68    display: flex;
69    height: 100%;
70    flex-direction: column;
71    align-items: center;
72    justify-content: center;
73    
74}
75
76.top-title1{
77    font-size:28px;
78    font-weight:600;
79    margin-bottom: 7px;
80    line-height:55px;
81}
82
83.top-title2 h1{
84    margin-top: 25px;
85    font-size:20px;
86    font-weight: bold;
87    line-height: 24px;
88    letter-spacing:2px;
89}
90
91
92

行動規範の内容に同意します

回答1件

.header の高さと同じ値の padding-top を与えてからならないようにすればいいでしょう。

css
1.header{
2    width:100%;
3    height: 75px;
4    display: flex;
5    position: fixed; /* 追加 */
6}
7
8.top-wrapper{
9    height: 500px;
10    background-image:url(images/top-wrapper.jpg);
11    background-size: cover;
12    background-position: center;
13    text-align:center;
14    padding-top: 75px; /* 追加 */
15}