KoffieMeister KoffieMeister - 3 months ago 17
CSS Question

My flexbox won't center

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:

(See picture)

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

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>