title: Centering logo in header / navigation bar
body: <p>I'm trying to create a site and started with the navbar. I'm trying to center the logo and give the subs/links (? don't know what they're called, the a-tags) a little more space.</p>
  <p>I tried following some video tutorials and Stackoverflow answers but they caused the left 3 links to be more downwards and the 3 right links to be above everything else, and caused the overall header size to almost double. I'd hugely appreciate it if someone could help me out! :) There might be some trash code that's not needed or is a bad practice overall, but incase it wasn't clear I'm a total beginner when it comes to web design :p</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 { 
    margin: 0;
    font-family: 'Open Sans', sans-serif;
  }
  
  .header {
    overflow: hidden;
    background-color: #262e28;
    padding: 10px 10px;
    box-shadow: 0px 2px 8px #888888;
  }
  
  .header a {
    color: white;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 14px; 
    line-height: 25px;
    border-radius: 4px;
  }
  
  .header a.logo {
    font-size: 25px;
    color: white;
      display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }
  
  .header a:hover {
    color: #aeaeae;
  }
  
  .header a.active {
    color: #aeaeae;
  }
  
  .header-right {
    float: right;
  }
  
  .header-left {
    float: left;
  }
  
  @media screen and (max-width: 500px) {
    .header a {
      float: none;
      display: block;
      text-align: left;
    }
    
    .header-right {
      float: none;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" type="text/css" href="assets/style.css"&gt;
  &lt;link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&amp;display=swap" rel="stylesheet"&gt;&lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="header"&gt;
    &lt;div class="header-right"&gt;
      &lt;a href="#"&gt;&lt;b&gt;1&lt;/b&gt;&lt;/a&gt;
      &lt;a href="#"&gt;&lt;b&gt;2&lt;/b&gt;&lt;/a&gt;
      &lt;a href="#"&gt;&lt;b&gt;3&lt;/b&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;a href="#" class="logo"&gt;LOGO&lt;/a&gt;
    &lt;div class="header-left"&gt;
      &lt;a href="#"&gt;&lt;b&gt;4&lt;/b&gt;&lt;/a&gt;
      &lt;a href="#"&gt;&lt;b&gt;5&lt;/b&gt;&lt;/a&gt;
      &lt;a href="#"&gt;&lt;b&gt;6&lt;/b&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>