title: Add border separation to li elements with flexbox
body: <p>Whenever I apply flexbox stretch or width 100% to the li items they get pushed to a flex start position at the left side of the page instead of centered.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> body {
     margin: 0;
   }
   ul,
   li,
   a {
     text-decoration: none;
     list-style-type: none;
     padding: 0;
   }
   .site-wrapper {
     min-height: 100vh;
   }
   .main-header,
   .main-nav {
     display: flex;
   }
   .main-nav {
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     margin: 0;
   }
   .main-nav li {
     margin-bottom: 5%;
   }
   .mobile-nav-wrapper {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
   }
   .toggle-mobile-nav {
     border: 1px solid black;
     height: 30px;
     width: 30px;
     align-self: center;
     margin-right: 2.5%;
     border-radius: 10%;
     padding: 1%;
   }
   .toggle-mobile-nav:hover {
     cursor: pointer;
   }
   #logo {
     margin-left: 20%;
     cursor: pointer;
   }
   .fa-lg {
     margin-top: .15em;
     font-size: 1.9em;
     margin-left: .05em;
   }
   .intro {
     display: flex;
     flex-direction: column;
     padding-left: 2.5%;
     padding-right: 2.5%;
     align-items: center;
     background-color: #38A5DB;
   }
   .intro h1 {
     padding-top: 10%;
   }
   .intro h3 {
     padding-bottom: 5%;
   }
   .intro-image {
     max-width: 100%;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="site-wrapper"&gt;
    &lt;div class="mobile-nav-wrapper"&gt;
      &lt;li&gt;
        &lt;h1 id='logo'&gt;JP&lt;/h1&gt;
      &lt;/li&gt;
      &lt;div class="toggle-mobile-nav"&gt;
        &lt;i class="fa fa-bars fa-lg"&gt;&lt;/i&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;header class="main-header"&gt;
      &lt;!-- Main Header Start --&gt;
  
      &lt;ul class="main-nav"&gt;
        &lt;li&gt;&lt;a href="#"&gt;About Me&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;My Work&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Playground&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact Me&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/header&gt;
    &lt;!-- Main Header end --&gt;</code></pre>
  </div>
  </div>
  </p>