title: Aligning a header using flexbox with its contents below
body: <p>I am trying to make my headers contents (the logo and the white text) inline with the content class below where the logo is floating to the left and the text to the right but I am unable to do so since flexbox seems to be disallowing something, I just need help to figure this out.</p>
  
  <p>Navigation Bar:</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-css lang-css prettyprint-override"><code>body {
    background-color: #000000;
    height: 100%;
    margin: 0;
    top: 0;
    line-height: 160%;
    position: relative;
    font-family: Tahoma, Arial, Sans Serif;
    font-size: 16px;
    color: rgba(250, 250, 210, 0.6);
    box-sizing: border-box;
    overflow-y: hidden;
  }
  
  .navigationBar {
    background: rgba(0, 0, 0, 0.8);
    padding: 20px;
    height: 35px;
    width: 100%;
    position: fixed;
    box-shadow: 0px 3px 5px #000;
    color: white;
    font-size: 38px;
    font-family: BurbankBigCondensed-Black, sans-serif;
    top: 0;
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;
    /* NEW, Spec - Firefox, Chrome, Opera */
    align-items: center;
    justify-content: center;
  }
  
  .navigationLogo {
    color: #ffa500;
    float: left;
    margin-right: 1000px;
  }
  
  .wrapper {
    margin-top: 75px;
    width: 100%;
    overflow-y: auto;
    height: calc(100vh - 75px);
    position: fixed;
  }
  
  .content {
    padding-top: 25px;
    margin-left: auto;
    margin-right: auto;
    min-height: 1500px;
    background: rgba(0, 0, 0, 0.5);
    width: 1130px;
    padding-left: 20px;
    padding-right: 20px;
    /*border-left: 1px solid #080808;*/
    /*border-right: 1px solid #080808;*/
  }
  
  .navigationItem {
    margin-right: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="navigationBar"&gt;
    &lt;div class="navigationLogo"&gt;Fortnite
      &lt;font color="#ffae19"&gt;Pro&lt;/font&gt;
      &lt;font color="#ffb732"&gt;Snipes&lt;/font&gt;
    &lt;/div&gt;
    &lt;div class="navigationItem"&gt;EU&lt;/div&gt;
    &lt;div class="navigationItem"&gt;NAE&lt;/div&gt;
    &lt;div class="navigationItem"&gt;NAW&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="wrapper"&gt;
    &lt;div class="content"&gt;
      ...
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>