背景画像の余白をなくしたい

こんにちは。
現在、ヘッダー部分を作成しています。
初学者ゆえ、初歩的な質問かもしれませんがご回答お願いいたします。

問題点

ヘッダータグにbackground-imageを指定しています。
また、子要素であるheader_navに対して、margin: 5vh auto 0;としたところ、背景画像の上部に余白ができてしまった。

解決したいこと

背景画像上部に余白を生じさせずに、背景画像内でheader_navにマージンを適用させたい。

以下、コード

html
1<header>
2    <div class="header_nav">
3        <div class="logo">logo</div>
4            <nav>
5                <ul class="main_nav">
6                    <li class="main_nav_li"><a href="index.html">Top</a></li>
7                    <li class="main_nav_li"><a href="about.html">About</a></li>
8                    <li class="main_nav_li"><a href="product.html">Product</a></li>
9                    <li class="main_nav_li"><a href="news.html">News</a></li>
10                    <li class="main_nav_li"><a href="contact.html">Contact</a></li>
11                </ul>
12             </nav>
13    </div>
14    <h1>キャッチコピー</h1>
15</header>

css
1header {
2    height: 100vh;
3    background-image: url(example.jpeg);
4    background-repeat: no-repeat;
5    background-position: center center;
6    background-attachment: scroll;
7    background-size: cover;
8
9}
10
11.header_nav {
12    display: flex;
13    line-height: 150px;
14    width: 80%;
15    margin: 5vh auto 0;
16    justify-content: space-between;
17}
18
19.logo {
20    width: 150px;
21    height: 150px;
22    background-color: #6fb9db;
23    text-align: center;
24    font-size: 20px;
25    border-radius: 50%;
26    color: #d1cdcd;
27}
28
29.main_nav {
30    display: flex;
31    margin: 0;
32    padding: 0;
33}
34
35.main_nav > li > a{
36    margin-left: 5vw;
37    font-size: 20px;
38    font-weight: bold;
39}