My flexbox won't center

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>