Why doesn't Margin: auto work in this Flex-box container?

Question

Main container didn't stretch full width

Margin-left: auto doesnt work in the Nav > Main's Flex-box container, I can't figure out why. Maybe the display: inherit in the Main's styling causes this problem, but even changing it to flex doesn't work out. I have included a demo down below. I'd appreciate your help and hopefully won't take up too much of your time. Thanks in advance!

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.87); }

main {
  display: inherit;
  margin-right: 3rem;
  margin-left: 3rem; }

section {
  margin-top: 16px;
  margin-bottom: 16px;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(192, 192, 192, 0.6); }

nav {
  background-color: #2196f3;
  display: flex;
  padding-top: 16px;
  padding-bottom: 16px; }
  nav ul {
    display: inline-flex; }
    nav ul li {
      display: block; }
      nav ul li:not(:first-child) {
        margin-left: 32px; }
    nav ul a {
      display: block;
      color: rgba(255, 255, 255, 0.6); }
      nav ul a:hover {
        text-decoration: none;
        color: rgba(255, 255, 255, 0.87); }
    nav ul.secondary {
      margin-left: auto !important; }

ul, ol {
  list-style: none; }

h1 {
  font-size: 3.5em; }
  @media (min-width: 37.438em) {
    h1 {
      font-size: calc(3.5em + ((100vw - 37.438em) / (120 - 37.438)) * (5.998 - 3.5)); } }
  @media (min-width: 120em) {
    h1 {
      font-size: 5.998em; } }

h2 {
  font-size: 2.375em; }
  @media (min-width: 37.438em) {
    h2 {
      font-size: calc(2.375em + ((100vw - 37.438em) / (120 - 37.438)) * (3.75 - 2.375)); } }
  @media (min-width: 120em) {
    h2 {
      font-size: 3.75em; } }

h3 {
  font-size: 2em; }
  @media (min-width: 37.438em) {
    h3 {
      font-size: calc(2em + ((100vw - 37.438em) / (120 - 37.438)) * (2.999 - 2)); } }
  @media (min-width: 120em) {
    h3 {
      font-size: 2.999em; } }

h4 {
  font-size: 1.563em; }
  @media (min-width: 37.438em) {
    h4 {
      font-size: calc(1.563em + ((100vw - 37.438em) / (120 - 37.438)) * (2.024 - 1.563)); } }
  @media (min-width: 120em) {
    h4 {
      font-size: 2.024em; } }

h5 {
  font-size: 1.25em; }
  @media (min-width: 37.438em) {
    h5 {
      font-size: calc(1.25em + ((100vw - 37.438em) / (120 - 37.438)) * (1.499 - 1.25)); } }
  @media (min-width: 120em) {
    h5 {
      font-size: 1.499em; } }

h6 {
  font-size: 1.125em; }
  @media (min-width: 37.438em) {
    h6 {
      font-size: calc(1.125em + ((100vw - 37.438em) / (120 - 37.438)) * (1.25 - 1.125)); } }
  @media (min-width: 120em) {
    h6 {
      font-size: 1.25em; } }

h1, h2 {
  font-weight: 300; }

h3, h4, h5 {
  font-weight: 400; }

h6 {
  font-weight: 700; }

p.subtext {
  color: rgba(158, 158, 158, 0.87); }

a {
  color: rgba(30, 144, 255, 0.87);
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  margin-top: .5em;
  margin-bottom: .5em; }

p {
  padding-top: 8px;
  padding-bottom: 8px; }

span.subheading {
  color: rgba(158, 158, 158, 0.87);
  font-size: calc(1em - 0.375em); }

.textAlign_center {
  text-align: center !important; }

/*# sourceMappingURL=main.css.map */

 <nav>
  <main>
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Documentation</a></li>
   </ul>

   <ul class="secondary">
    <li><a href="#">Home</a></li>
    <li><a href="#">Documentation</a></li>
   </ul>
  </main>
 </nav>
 <main>
  <section>
   <article>
    <h1 class="textAlign_center">Responsive Typography</h1>
   </article>
  </section>
  <section>
   <article>
    <h2>Heading<span class="subheading">Subheading</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam et vitae id, tempora, placeat modi, aliquam, illo dolores aut ad similique esse aliquid dolorum ipsum fugit eum nostrum optio laborum totam. Minus placeat recusandae velit neque officia esse, commodi officiis cumque quibusdam sequi tenetur hic, ullam aut itaque pariatur excepturi maxime ad aperiam quidem? Itaque officia eum a, aliquid necessitatibus similique accusamus aspernatur ipsum soluta esse beatae temporibus ducimus dolorem quasi, ipsam quos. Sint maiores tempore, at adipisci consequuntur illum rerum laborum aliquam commodi mollitia ducimus, harum veniam, laudantium modi provident porro. Quisquam illo nisi sapiente modi officia incidunt molestias.</p>
   </article>
  </section>
  <section>
   <article>
    <h2>Heading<span class="subheading">Subheading</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam et vitae id, tempora, placeat modi, aliquam, illo dolores aut ad similique esse aliquid dolorum ipsum fugit eum nostrum optio laborum totam. Minus placeat recusandae velit neque officia esse, commodi officiis cumque quibusdam sequi tenetur hic, ullam aut itaque pariatur excepturi maxime ad aperiam quidem? Itaque officia eum a, aliquid necessitatibus similique accusamus aspernatur ipsum soluta esse beatae temporibus ducimus dolorem quasi, ipsam quos. Sint maiores tempore, at adipisci consequuntur illum rerum laborum aliquam commodi mollitia ducimus, harum veniam, laudantium modi provident porro. Quisquam illo nisi sapiente modi officia incidunt molestias.</p>
   </article>
  </section>
 </main>

Answer 1

Flexbox has its own layout positioning properties that you can use instead of adding margins for positioning. When you are using flex, it already defines a lot of positioning properties for you. I assume you are trying to push your flexbox to the right with marginLeft: "auto" . With flex properties, and depending on where your flex box main axis is, you would only need to use justify-content: flex-end or align-items: flex-end.

If it is only one item that you need to readjust, try using justify-self for that purpose: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self