My flexbox won't center - html

Question

I'm currently trying to learn how to make websites, I just started to test out flexbox but I cant figure out how to center the red box:
I looked at a very clear guide (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and I figured I just had to use justify-content: center. But I am cleary doing something wrong please help.
P.S. Run the snippet in fullscreen, otherwise you won't see the problem.
* {
margin: 0px;
padding: 0px;
}
.flex_container {
display: flex;
flex-flow: row wrap;
border: 5px solid blue;
}
header,
section,
footer,
aside,
nav,
article {
display: block;
}
body {
justify-content: center;
border: 5px solid grey;
}
#top_menu {
text-align: center;
width: 100%;
height: 40px;
padding: 10px;
border: 5px solid green;
}
#top_menu li {
list-style: none;
font: 20px helvetica;
color: green;
display: inline;
}
main {
padding: 20px;
max-width: 1000px;
border: 5px solid red;
}
<div class="flex_container">
<nav id="top_menu">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</nav>
</div>
<main>
Sample text
</main>

Answer 1

You can use margin: 0 auto; on the main element as it is not a flexbox.
See example below:
* {
margin: 0px;
padding: 0px;
}
.flex_container {
display: flex;
flex-flow: row wrap;
border: 5px solid blue;
}
header,
section,
footer,
aside,
nav,
article {
display: block;
}
body {
justify-content: center;
border: 5px solid grey;
}
#top_menu {
text-align: center;
width: 100%;
height: 40px;
padding: 10px;
border: 5px solid green;
}
#top_menu li {
list-style: none;
font: 20px helvetica;
color: green;
display: inline;
}
main {
padding: 20px;
max-width: 1000px;
border: 5px solid red;
margin: 0 auto;
}
<div class="flex_container">
<nav id="top_menu">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</nav>
</div>
<main>
Sample text
</main>

Answer 2

Flex only affects the children of an element. The red box is not in the flex container, so it won't be affected.