Header's Border Line Reacting to Main

<header>
    <h1>Neo<span>Blog</span></h1>
    <nav>
        <ul>
            <li><a href="../index.html">Home</a></li>
            <li><a href="home.html">Blog</a></li>
            <li><a href="about.html">About</a></li>
        </ul>
    </nav>
    <a href="../index.html">
        <img src="../public/assets/logo.png" alt="Neo" />
    </a>
</header>

<main>
    <h1>Welcome To Neo<span>Blog</span></h1>
    <p>
        <span>It seems like I got your attention.</span>
        <span>Want to check below?</span><span>Let's check together!</span>
    </p>
</main>

/* Header */
header {
    position: sticky;
    display: flex;
    top: 0;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding);
    border-bottom: 1px solid var(--blue-color);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Main */
main {
    display: flex;
    overflow-x: hidden;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-bottom: 2px dashed var(--blue-color);
    padding: var(--padding);
    border-radius: 5%;
}