div要素からmarginがはみ出ている

##質問

<header>
        <div class="humberger">
            <div class="menu">
                <input type="checkbox" name="" id="input">
                <div class="label_line">
                    <!-- divタグで囲み、サイズ指定できるようにする -->
                    <label for="input" class="line_box">
                        <!-- 三本線の為のdivタグ -->
                        <div class="line"></div>
                        <div class="line"></div>
                        <div class="line"></div>
                    </label>
                </div>

                <label for="input" class="back">
                    <div></div>
                </label>

                <div class="nav_content">
                    <nav>
                        <ul>
                            @if(Auth::check())
                            <li class="ist">{{ Auth::user()->name }}さん,ようこそ！</li>

                            <li class="list">
                                <a href="/display">
                                    <img src="image/cart.png" class="nav_img">
                                    <span>カートを見る</span>
                                </a>
                            </li>
                            <li class="list">
                                <a class="" href="{{ route('logout') }}">
                                    <img src="image/logouto.png" class="nav_img">
                                    <span>ログアウト</span>
                                </a>
                            </li>
                            @else
                            <li class="list">
                                <a href="{{ route('login') }}">
                                    <img src="image/login.png" alt="login" class="nav_img">
                                    <span>ログイン</span>
                                </a>
                            </li>
                            <li class="list">
                                <a href="{{ route('register') }}">
                                    <img src="image/register.png" class="nav_img">
                                    <span>新規会員登録</span>
                                </a>
                            </li>
                            @endif
                        </ul>
                    </nav>
                </div>
            </div>

            <h1>
                <a class="top_back text-monospace d-flex" href="{{ url('/') }}">
                    {{ config('app.name', 'The　Promontroy') }}
                </a>
            </h1>
        </div>
    </header>

header{
    position: fixed;
    width: 100%;
    height: 100px;
    z-index: 100;
    background-color:gray ;
}

h1{
    font-size: 200%;
    font-weight: bolder;
    text-align: center;
    padding: 30px 0;
    margin: 0 auto;
    align-items: center;
}

上記写真では、デベロッパーツールを使用してCSSのプロパティを可視化した写真です。
写真から見てもわかるように要素の中からmarginがはみ出ています。

コードでは、div要素の中に問題のコードを入れているのですがどうしてdiv要素からはみ出ているのでしょうか？

個人的にはdiv要素で囲っているのでdiv要素からはみ出る事はないと考えているのですが、
写真のようにmarginが出てしまうのはmarginの特性によるものでしょうか？