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:
CSS:
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%;
}
