Flexbox items spilling over into header - html

Question

I am building a personal website, and have been using a lot of flexbox to attain the layout I want. I recently ran into an issue that I cannot seem to solve. Where the items in my flexbox container seem to be spilling out and into other containers, such as my header container or past the bottom of where the page should end.
<div class="main-container">
<div class="header">
<h1>John Doe</h1>
<h2>Test</h2>
</div>
<div class="content-container">
<div class="projects">
<div class="content-container">
<div>
<h1>project</h1>
<p>project text</p>
</div>
<div>
<h1>project</h1>
<p>project text</p>
</div>
<div>
<h1>project</h1>
<p>project text</p>
</div>
<div>
<h1>project</h1>
<p>project text</p>
</div>
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/XYBbgE
I wanted to use a flexbox layout for my projects section so that the content will be centered, and I like how easy it is to do that with flexbox. If you adjust the height of the codepen container by either increasing the height OR reduce it, you can see that the header is hiding some of the elements.
I have included some HTML to kind of show the layout. I have excluded a lot to conserve space, however the codepen link is much closer to what the actual design looks like.
EDIT: I made a gif demonstrating the behavior that I am having an issue with
gif of flexbox problem
As you can see, as I adjust the height, the header of my page appears to cover up some of the items beneath it. I also cannot scroll higher than what the height is, if that makes sense.

Answer 1

To point out your error, it's the alignment of item's, for all elements you have aligned it center vertically. so it seemed out of a container as it's height was more than viewport. You can fix it by align-items: center; to align-items: flex-start;
.projects {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
}
and to let you know, i think you are using too flex for everything which can be achieved without it easily