Header's Border Line Reacting to Main

I don't know how is that possible to be happening, so here I am. Here is the piece of the codes: HTML:

<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>
    <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>

CSS:

/* 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%;
}

/* 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%;
}

5 Replies

Neow cat•12mo ago

It is only happening when dimension is about to 300. 100vh, doesn't really help since I don't want to use media query.

Kevin Powell•12mo ago

Since I can't see it live, I could be wrong here, but I think what's happening is the navigation is overflowing. Everything else is the "right" width, and the content inside the header is overflowing because I can't see all that fitting within 300px.

Neow cat•12mo ago

Live is: https://neoaichan.me/blog I guess the right thing is to do overflow: hidden. But wouldn’t that hide the content of header then?

Neodevil

This is my personal blog.

Kevin Powell•12mo ago

I'd probably use flex-wrap: wrap in the header and footer, so they wrap when there isn't enough room. Or, really, I'd probably just use a media query and have it go from flex-direction: column at small sizes, to row at bigger ones. I know you said you're trying to avoid media queries, but we do have them for a reason 😄 - but if you really want to avoid them, then I'd use wrap.

Neow cat•12mo ago

I had to use media queries 😂

Gaming

Programming

Header's Border Line Reacting to Main