Stuck on responsible flex boxes - html

Question

got a problem with wrapping a flexbox, when the width is too small to display both. Here is a fullscreen screen: Shows a fullscreen-site
So here is what happens if reduce the browser width: reduced width
Now, if I reduce the width again, it looks like that: 1 mm more reduced than before
But of course, it should be among themselves.
body {
background-color: aquamarine;
}
#Wrapper,
body,
html,
main,
nav,
header,
div,
class,
footer {
margin: 0;
padding: 0;
}
main {}
header h1 {
position: relative;
width: 50%;
top: 8vh;
left: 25%;
text-align: center;
margin: 0;
padding: 0;
font-family: 'Bree Serif', serif;
color: deeppink;
}
.Container {
position: absolute;
top: 25%;
left: 30vw;
display: flex;
height: 50%;
width: 40%;
flex-flow: row wrap;
justify-content: space-between;
}
.item {
width: 16em;
background-color: lightslategrey;
}
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<div id="Wrapper">
<header>
<nav>
</nav>
<h1>This is a heading and it's extra long to test stuff.</h1>
</header>
<main>
<div class="Container">
<div class="item">
</div>
<div class="item">
</div>
</div>
</main>
</div>

Answer 1

I see a few issues on your CSS that forces this behavior on your boxes item.
The main issue is that you limit your container to a width of 40% and then when you resize your window, there's no space for the inner boxes to be displayed correctly.
I'd give a full width: 100% to the container, left: 0 and justify-content: center.
Then I'd give margins-left and right to the inner items.
So your CSS to something like this:
.Container {
position: absolute;
top: 25%;
left: 0;
display: flex;
height: 50%;
width: 100%;
flex-flow: row wrap;
justify-content: center;
}
.item {
width: 16em;
background-color: lightslategrey;
margin: 0 30px;
}
This solves partially the issue as your inner boxes are still overlaped if you reduce your window size.
To solve it for real, you'd probably need a mediaquery to make the inner boxes smaller when the window is resized.
It could be something like this:
#media all and (max-width: 650px) {
.item {
width: 8em;
}
}
Here's a codepen so you can see the results: https://codepen.io/annabranco/pen/VEjXOL