title: CSS Nav Bar not aligning to the right using Flex
body: <p>I am trying out "flex" with CSS.
  I cannot get my nav bar to move to the right. I have tried for hours using margin, changing displays, using float. It won't move passed the middle... Sorry i'm still learning</p>
  
  <p>I have pasted a link to my codepen to show you a better picture: </p>
  
  <p><a href="https://codepen.io/Saharalara/pen/pGyQWZ" rel="nofollow noreferrer">https://codepen.io/Saharalara/pen/pGyQWZ</a></p>
  
  <p>The HTML</p>
  
  <pre><code> &lt;div id="page-wrapper"&gt;
   &lt;header&gt;
   &lt;div class="logo"&gt;
    &lt;img id="header-img" src="https://upload.wikimedia.org/" alt="Minnie Pic"&gt; 
    &lt;span id="logo-name"&gt;Minnie &amp; Friends Inc&lt;/span&gt;
   &lt;/div&gt;
   &lt;nav id="nav-bar"&gt;
    &lt;ul id="nav-ul"&gt;
     &lt;li class="nav-link"&gt;&lt;a href="#stories"&gt;Stories&lt;/a&gt;&lt;li&gt;
     &lt;li class="nav-link"&gt;&lt;a href="#toys"&gt;Toys&lt;/a&gt;&lt;li&gt;
     &lt;li class="nav-link"&gt;&lt;a href="#suscribe"&gt;Suscribe&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/header&gt;
  &lt;body&gt;
  &lt;container id="container1"&gt;
   &lt;section&gt;
    &lt;h1 id="stories"&gt;Minnie &amp; Friends Stories&lt;/h1&gt;
     &lt;p&gt;
     &lt;a href="#"&gt; Here&lt;/a&gt; you will find all of the best Minnie &amp; Friends toys 
     and stories.
     Choose from a huge variety of stories and the happy gang and they go on 
     many adventures.
    &lt;/p&gt;
     &lt;section&gt;
      &lt;iframe id="video" height="180" src="https://www.youtube.com/watch? 
       v=crJ1CwD_TX0" frameborder="1" allowfullscreen &gt;&lt;/iframe&gt;
    &lt;/section&gt;
  &lt;h2 id="toys"&gt;Minnie &amp; Friends Toys&lt;/h2&gt;
  &lt;p&gt;
    &lt;a href="#"&gt;Here&lt;/a&gt; you will also find many of your favourite characters 
     to choose from and order to arrive at your doorstep to continue their 
     adventures with you.
  &lt;/p&gt;
  &lt;h3 id="suscribe"&gt;Suscribe to our newletter&lt;/h3&gt;
  &lt;/section&gt;
  &lt;/container&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>The Css</p>
  
  <pre><code>#page-wrapper {
   position: relative;
   color: black;
   margin: -9px;
   padding: 10px;
   border: 4px solid;
   border-radius: 3px;
   background-color: rgba(223, 42, 42, 0.20);
   padding: 10px 20px 20px 20px;
  }
  
  header {
   display: flex;
   font-size: 1.3em;
   margin-left: -10px;
   margin-right: -10px;
   background-image: url('https://cdn2.vectorstock.com/i/1000x1000/07/66/pink- 
   white-star-polka-dots-background-vector-7590766.jpg');
   opacity: 0.80;
  }
  
  #header-img {
   height: 120px;
  }
  
  #logo-name {
   font-size: 2em; 
   color: black;
  }
  
  h1,
  h2,
  h3 {
  font-size: 2em;
  }
  
  //navigation bar
  
  #nav-bar {
  display: flex;
  justify-content: flex-end; //**not working***
  }
  
  #nav-ul {
  list-style-type: none;
  display: flex;
  }
  
  nav li {
   padding: 4px;
  
  }
  
  //body
  
  p {
   font-size: 1.2em;
  }
  
  #video {
   border: 5px solid;
   border-radius: 3px;
   color: pink;
  }
  </code></pre>