Is there a way to prevent the "about" section (flexcontainer div) from being displaced by the header element?
I have a gap between the header element, consisting of a title and nav bar, and the "about" section. However, when resizing the window, the "about" section shifts even though there is still space between the elements.
HTML Code:
<body style="background-image: url(#); background-color: #a6afbe;">
<header>
<h1>Haruhi Suzumiya 3D School</h1>
<nav>
<ul class="nav-list">
<li><a class="noselect" href="#">Home</a></li>
<li><a class="noselect" href="#">About</a></li>
<li><a class="noselect" href="#">Pictures</a></li>
<li><a class="noselect" href="#">Contact</a></li>
<li><a class="noselect"
href="#"</a></li>
</ul>
</nav>
</header>
<div class="flexcontainer" style="top: 30rem">
<section>
<h2>About</h2>
<article>
<p class="main">
texttexttext
</p>
<img src="#" alt="">
</article>
</section>
</div>
</body>
CSS Style:
.flexcontainer {
top: inherit;
display: -webkit-flex;
display: flex;
position:relative;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
justify-content: center;
}
header {
display: flex;
flex-flow: row wrap;
flex-direction: column;
justify-content: center;
}
Here is an illustration showing how it looks when not being moved: Element not moved
And here is an illustration demonstrating how it appears when being resized and moved: Element being moved