title: Keep logo in left corner and centre ul elements with CSS
body: <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>header {
    display: flex;
    paddingBottom: 8px;
    paddingLeft: 5px;
  }
  
  .logo {
    margin-top: 5px;
    height: 40px;;
    padding-left: 10px;
  }
  
  ul {
    display: flex;
    list-style-type: none;
    font-size: 15px;
    justify-content: center;
    font-weight: 100;
  }
  
  li {
    padding-right: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;img src={nicklogo} className="logo" alt="logo" /&gt;
    &lt;ul&gt;
      &lt;li&gt;Me&lt;/li&gt;
      &lt;li&gt;Projects&lt;/li&gt;
      &lt;li&gt;Skills&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have a header element that has an img tag and ul tag wit 3 li elements.
  I have the logo in the img tag in my left corner. I want to position the 3 li elements in the centre of the header element.</p>
  
  <p>I also want to make it scale when people are reading it on different size screens.</p>