title: How to center align/justify menu items in NavBar's media query?
body: <p>Working on my first website focused on the Apple-esque minimalistic style. Here is the code I have developed so far after learning from a few sources and a question on here. My final issue is styling the NavBar while in the mobile view (media query is active). Right now I believe the flex-display (which fixed my first issue) to be causing all the menu items to remain expanded horizontally when in mobile view and the bars icon is clicked. When the menu bar is closed, currently it is perfect, with the logo ending up in the middle of the NavBar. The only things I need to alter at this point how the menu items are formatted when the bars icon is clicked/expanded in 'mobile view' and also to ensure the background of the NavBar expands properly when the menu is activated.</p>
  
  <p>Cheers</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .topnav {
    overflow: hidden;
    background-color: #333;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  
  .topnav a {
    display: inline-flex;
    color: #fff;
    text-align: justify;
    text-decoration: none;
    font-size: 15px;
    font-weight: lighter;
    transition: 0.3s;
    padding: 0;
    margin: 5px 60px 5px 60px;
    list-style-type: none;
  }
  
  .topnav a:hover {
    color: #4286f4;
  }
  
  .active {
    background-color: #333;
    color: #4286f4;
  }
  
  .topnav .icon {
    display: none;
  }
  
  @media screen and (max-width: 800px) {
    .topnav a:not(:first-child) {
      display: none;
    }
    .topnav a.icon {
      float: left;
      display: flex;
      position: absolute;
      left: 0;
      top: 9px;
    }
  }
  
  @media screen and (max-width: 800px) {
    .topnav.responsive {
      position: static
    }
    .topnav.responsive .icon {
      position: absolute;
      left: 0;
      top: 9px;
    }
    .topnav.responsive a {
      float: left;
      display: inline;
      text-align: center;
      line-height: 100px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
  &lt;div class="topnav" id="myTopnav"&gt;
    &lt;a href="#"&gt;&lt;img src="Images/DivinitalLogo.png" width="30" height="30"&gt;&lt;/a&gt;
    &lt;a href="#home"&gt;Home&lt;/a&gt;
    &lt;a href="#news"&gt;News&lt;/a&gt;
    &lt;a href="#contact"&gt;Contact&lt;/a&gt;
    &lt;a href="#about"&gt;About&lt;/a&gt;
    &lt;a href="javascript:void(0);" class="icon" onclick="myFunction()"&gt;
      &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
    &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>