headerの浮き、margin指定するとmainと同じ位置でheaderも下がってしまう。

Question

前提・実現したいこと

header浮き、mainの回り込みを解消したい。

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

mainだけでなくbodyも同じ高さ分移動するので困っています。
似た質問が多いので恐縮ですが、よろしくお願いします。

該当のソースコード

<header class="header">
    <a href="/" class="logo"><img src="img/" alt=""></a>
<input type="checkbox" id="menu-checkbox">
    <label for="menu-checkbox">
    <div class="button">MENU</div>
	</label>
    <nav class="menu">
        <li class="link"><a href="index.html"></a>HOME</li>
		<li class="link"><a href=""></a></li>
        <li class="link"><a href=""></a></li>
        <li class="link"><a href=""></a></li>
        <li class="link"><a href=""></a></li>
        <li class="link"><a href=""></a></li>
    </nav>
 </header>
<main>
<div class="top">
<img src="img/" alt="">
</div>
	
</main>	
<footer>

.header {
    position: relative;
    position: fixed;
    z-index: 100;
    width: 100%;
    height:60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
}
.logo {
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    color: #333;
    margin-left: 15px;
}
.button {
    display:inline-block;
    margin-right: 15px;
}
.menu{
    position: fixed;
    box-sizing:border-box;
    width:100%;
    height:100%;
    background:#3e4847;
    color:#fff;
    padding: 20px;
    top: 60px;
	left:-100%;
	transition: left 0.7s, opacity 0.7s;
}
.menu>li  {
    border-bottom: 0.5px solid #646B69;
    padding: 10px;
	list-style: none;
}

#menu-checkbox{
  display:none;
}

#menu-checkbox:checked+label+.menu {
    left: 0;
}
/*.clearfix::before{
   content:"";
   display:block;
   clear:both;
}
======================================*/

こちらのスライドメニューを練習していました。
リンク内容
「見た目」の時点ではheaderが浮いていますが次には整っていますので、その方法を知りたいです。

試したこと

リンク内容
回答の上記Javascriptの他、clearfixも試してみましたが反応しませんでした。
bodyやmainにmarginを足すと同じ高さ分、headerも下がってしまいます。

補足情報（FW/ツールのバージョンなど）

Comments

[itagagaki]

どこが問題なのか、言葉だけではちょっとわかりませんので、画像で示してもらったほうが良いです。
あと、これはあまり関係ないと思いますが、
.header {
position: relative;
position: fixed;
と、positionがダブってますよ。

[gentiana]

ご指摘ありがとうございます。
position: relative;
は消し忘れていました。
解決しました。次からは画像付きでわかりやすい文章を心掛けます。
ありがとうございました。

Answer 1

下記のようなことでしょうか。

.header {
    position: fixed;
    top:0;   /* 追加 */
    z-index: 100;
    width: 100%;
    height:60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
}

/* 以下追加 */
main {
  margin-top: 60px;
}

.header は top:0 が画面上部に固定
main は .headerの高さ分、margin-top で下げる。

Comments

[gentiana]

わかりにくい説明で申し訳ありません。
ご指示通りに入力すると正常に表示されました。
ありがとうございました。