ヘッダー上部に謎の空白ができる

Question

実現したいこと

ヘッダーは上に固定し、sectionに余白をつけたい

前提

sectionにmarginをつけたのですが、ヘッダーがsectionが始まる位置にきており、一番上でfixされません。

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

エラーメッセージ

該当のソースコード

<header class="header">
            <div class="inner">
                <h1>
                    <a href="#" class="header-logo">
                        <svg width="179" height="30" viewBox="0 0 179 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        </svg>
                    </a>
                </h1>
            </div>
            <button class="hmb" type="button" aria-label="メニューを開く" aria-controls="nav" aria-expanded="false">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </header>
        <nav id="nav" class="menu js-menu">
            <div class="overlay js-overlay">
                <img src="image/menu-bg.jpg" alt="menu-img">
                <ul class="list js-list" aria-hidden="true">
                    <li>
                        <a href="index.html" class="rotate">
                            <span>HOME</span>
                            <span>HOME</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="rotate">
                            <span>PROFILE</span>
                            <span>PROFILE</span></a>
                    </li>
                    <li>
                        <a href="" class="rotate">
                            <span>NEWS</span>
                            <span>NEWS</span></a>
                    </li>
                    <li>
                        <a href="" class="rotate">
                            <span>EVENT</span>
                            <span>EVENT</span></a>
                    </li>
                    <li>
                        <a href="" class="rotate">
                            <span>CONTACT</span>
                            <span>CONTACT</span></a>
                    </li>
                </ul>
            </div>
        </nav>
        <main>
            <section id="about-mv">
                <div class="a-mv__inner">
                    <div class="a-mv__wrap">
                        <div class="a-mv__title">
                            <div class="inner">
                                <h1>PROFILE</h1>
                                <p>
                                    指導者賞受賞実績を持つ講師をはじめ、
                                    幅広く活動をしている講師が寄り添い、
                                    丁寧にレッスンいたします。
                                </p>
                            </div>
                        </div>
                        <div class="a-mv__image">
                            <img decoding="async" src="image/profile_image.jpg" alt="profile">
                        </div>
                    </div>
                </div>
            </section>
        </main>```

```CSS
#about-mv {
    position: relative;
    width: 100%;
}
.a-mv__inner {
    position: relative;
}
.a-mv__wrap {
    display: flex;
}
.a-mv__title {
    position: relative;
    flex: 1;
}
.a-mv__image {
    overflow: hidden;
    border-radius: 4px 0 0 4px;
}
.a-mv__title .inner h1 {
    color: var(--title);
    line-height: 1.6;
    letter-spacing: .4em;
    word-break: keep-all;
}
.a-mv__title .inner p {
    line-height: 2;
}
@media print, screen and (min-width: 769px) {
    .a-mv__inner {
        margin-top: 18rem;
    }
    .a-mv__image {
        width: 82rem;
    }
    .a-mv__title .inner {
        position: absolute;
        inset: 10rem 7rem auto auto;
    }
    .a-mv__title .inner p {
        margin-top: 2.5rem;
    }
}
@media print, screen and (max-width: 768px) {
    .a-mv__wrap {
        flex-direction: column-reverse;
        margin-top: 5rem;
    }
    .a-mv__image {
        width: 34.5rem;
        margin-left: auto;
    }
    .a-mv__title .inner {
        width: 31.5rem;
        margin-inline: auto;
        padding-block: 4rem;
    }
    .a-mv__title .inner p {
        margin-top: 1.5rem;
    }
}```

### 試したこと

bodyにmargin0を設定しましたが、変わりません。

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

ここにより詳細な情報を記載してください。

Comments

[yambejp]

現象が確認できません。HTMLの提示が必要です。
印刷の余白のことでしょうか？

[tsl56]

HTML追記しました

[juner]

ソースの ``` はそれが行頭である必要があります。
つまり次の様に書くべきです

```
ソース
```

[juner]

playground としては次な感じですね https://livecodes.io/?x=id/9qzqeqxc2qh
見た感じ yambejp さんの言っている通り body と h1 の margin 問題ぽいですね。（display: block だと display: block flow になってしまう為、 margin が 相殺してしまう為 実際の場所ではない場所の margin が反映されて見えるのが問題ですね。 相殺自体を無効化する場合は display: block flow-root にするのが手ではありますが ここに関しては yambejp の言うように margin を 0 にするのが手っ取り早いと思います。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing

Answer 1

h1にもマージンが設定されるのでこんな感じで

body{
margin:0;
padding:0;
}
h1{
margin:0;
}