syuuヘッダーが下の要素と重ならないようにしたい

発生している問題

ヘッダーが下のtopクラスの要素と重なっていてtopクラスの一部が見えなくなっています。
解決方法を教えてほしいです。
また、開発環境(visual studio code)とブラウザ(google chorme)では表示のされ方が違いました。どうしてでしょうか？

該当のソースコード

html
1<header>
2        <div class="header-in">
3            <div class="header-left">
4                <img src="isara_img/isaralogo.png" alt="isara">
5                <p>バンコクのノマドエンジニア育成講座</p>
6            </div>
7            <div class="header-right">
8                <p>お問い合わせ / 資料請求はこちら</p>
9            </div>
10        </div>
11    </header>
12
13    <div class="top">
14        <h1>プログラミングで<br>人生の安定を手に入れよう</h1>
15        <img class="center-logo" src="isara_img/isaralogolarge.png">
16        <h2>バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</h2>
17    </div>

css
1header {
2    position: fixed;
3    top: 0;
4    z-index: 10;
5    height: 100px;
6    width: 100%;
7    background-color: #fff;
8}
9
10.header-in {
11    position: relative;
12    display: flex;
13    justify-content: space-between; /* 水平両端配置 */
14    align-items: center;  
15}
16
17.header-left {
18    display: flex;
19    align-items: flex-end;
20}
21
22.header-logo {
23    width: 150px;
24    height: auto;
25}
26
27.header-right {
28    position: absolute;
29    left: 70%;
30}
31
32.header-right p {
33    color: #fff;
34    cursor: pointer;
35    padding: 11px 40px;
36    background-color: #da6b64;
37    border-radius: 25px;
38}
39
40.top {
41    padding: 70px 0;
42    text-align: center;
43    background-image: url("isara_img/main.jpg");
44    background-size: cover;
45}
46
47.center-logo {
48    width: 300px;
49    height: auto;
50}
51