title: Moving link placement inside a navbar
body: <p>I am trying to move things around in the header <code>navbar</code> under <code>@media</code> trying to make my site responsive. I'm tinkering with a bunch of stuff but I've hit a wall.</p>
  
  <p>I'm trying to space out my header <code>navbar</code> links which currently are not spaced apart, and I'm also trying to move my subscription bar to the far right inside the <code>navbar</code>. </p>
  
  <p>Since I have been tinkering with stuff I probably have excess code in places it should not be, if so please let me know so I can understand how moving items functions and what I should avoid in the future.</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>* {
    text-decoration: none;
  }
  
  body {
    background-color: #f3f3f3;
  }
  
  header {
    background-color: #fff;
    width: 100%;
    height: 100px;
    display: flex;
    padding: 10px 0 30px 10px;
  }
  
  .header-logo img {
    height: 100px;
    padding: 10px 0px 10px 10px;
    float: left;
  }
  
  header nav ul {
    display: block;
    margin: 50px 0 0 auto;
    padding: 0 0 0 10px;
    width: fit-content;
  }
  
  header nav ul li {
    display: inline-block;
    padding: 0 5px;
  }
  
  header nav ul li a {
    font-family: 'Sorts Mill Goudy', serif;
    font-size: 16px;
    color: #111;
    text-transform: uppercase;
  }
  
  .home-link {
    float: right;
    padding: 0 0 0 0px;
  }
  
  .sub {
    display: none;
    background-color: rgb(70, 149, 223);
    margin-left: 5%;
    height: auto;
    list-style: none;
  }
  
  
  /* HAMBURGER MENU */
  
  .nav div {
    height: 4px;
    background-color: rgb(20, 15, 15);
    margin: 5px 0;
    border-radius: 25px;
    transition: 0.3s;
  }
  
  .nav {
    width: 30;
    display: block;
    float: right;
    margin: 1em 0 0 1em;
    padding-right: 0px;
  }
  
  .one {
    width: 30px;
  }
  
  .two {
    width: 20px;
  }
  
  .three {
    width: 25px;
  }
  
  .nav:hover div {
    width: 30px;
  }
  
  #hamburger {
    display: none;
    list-style: none;
  }
  
  .hamburger-toggle {
    float: right;
    padding: 25px 0px 0px 125px;
  }
  
  ul li a:hover {
    color: rgb(255, 255, 255);
  }
  
  
  /* Desktop Media */
  
  @media only screen and (min-width: 1000px) {
    header .header-logo {
      float: left;
      padding: 10px 10px 10px 10px;
      height: auto;
      width: 220px;
      display: table;
    }
    header nav ul {
      margin: 0 auto;
      padding-right: 50px;
    }
    header nav ul li {
      padding: 0 0 0 50px;
    }
    header nav ul li a {
      line-height: 150px;
      font-family: 'Sorts Mill Goudy', serif;
      font-size: 16px;
      color: #111;
      text-transform: uppercase;
      padding: 0 0 0 50px;
    }
    header .sub {
      display: block;
      font-family: 'Sorts Mill Goudy', serif;
      font-size: 16px;
      color: #111;
      text-transform: uppercase;
      line-height: 50px;
      border: 2px solid #111;
      float: right;
      padding: 2px 20px;
    }
    .sub {
      margin-left: auto;
      height: auto;
      position: relative;
      z-index: 1000;
      width: fit-content;
      height: 40px;
      background-color: rgb(70, 149, 223);
    }
    .index-banner {
      width: 100%;
      height: calc(100vh - 100px);
      max-width: 1080px;
      margin-right: auto;
      margin-left: auto;
      background-image: url('img/road_trip.jpg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
    .index-banner h1 {
      display: block;
      padding: 120px 0 0px 120px;
      font-family: 'Karma', serif;
      font-size: 60px;
      font-weight: 900;
      color: #fff;
      text-shadow: 4px 4px 16px #111;
    }
    .verticial-center {
      margin: 0 auto;
      display: table-cell;
      vertical-align: middle;
      padding: 120px 0 0 0;
    }
    .nav {
      display: none;
    }
    #hamburger {
      display: flex;
      line-height: 150px;
      font-family: 'Sorts Mill Goudy', serif;
      font-size: 16px;
      color: #111;
      text-transform: uppercase;
    }
    .hamburger-toggle {
      display: none;
    }
  }
  
  
  /*INDEX*/
  
  .index-banner {
    width: 100%;
    height: calc(100vh - 100px);
    background-image: url('img/road_trip.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  
  .index-banner h1 {
    padding-top: 30px;
    font-family: 'Karma', serif;
    font-size: 60px;
    font-weight: 900;
    line-height: 70px;
    color: #fff;
    text-align: center;
    text-shadow: 4px 4px 16px #111;
  }
  
  .verticial-center {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
  }
  
  
  /* HERO SECTION */
  
  .hero-section {
    font-family: 'Sorts Mill Goudy', serif;
    font-size: 24px;
    color: #111;
    width: 100%;
    max-width: 1080px;
    /* or whatever width you want */
    margin-right: auto;
    margin-left: auto;
  }
  
  .hero-section {
    font-family: 'Karma', serif;
    font-size: 40px;
    color: #111;
    text-align: center;
    padding: 25px;
  }
  
  .hero-paragraph {
    margin: 0 auto;
    max-width: 100%;
    font-family: 'Sorts Mill Goudy', serif;
    font-size: 24px;
    color: #111;
    text-align: center;
    padding: 25px;
  }
  
  
  /* RESPONSIVNESS */
  
  @media only screen and (min-width: 1000px) {
    .wrapper {
      width: 100%;
      margin: 0 auto;
    }
    .index-banner {
      height: 500px;
    }
    .hero-paragraph {
      width: 100%;
      margin: 0 auto;
    }
    .hero-section {
      width: 100%;
      margin: 0 auto;
    }
  }
  
  
  /* BLOG PAGE */
  
  .body-wrapper {
    width: 100%;
    max-width: 1080px;
    /* or whatever width you want */
    margin-right: auto;
    margin-left: auto;
    padding-top: 50px;
  }
  
  .blog-title {
    font-family: 'Sorts Mill Goudy', serif;
    font-size: 60px;
    color: #111;
    text-align: center;
    display: block;
  }
  
  .blog-title div {
    font-family: 'Karma', serif;
    font-size: 40px;
    color: #111;
    padding: 60px;
    width: 50%;
    text-align: left;
  }
  
  .blog-title div h1 {
    font-family: 'Karma', serif;
    font-size: 40px;
    color: #111;
    text-align: center;
  }
  
  
  /* FOOTER */
  
  footer {
    width: calc(100% - 80px);
    padding: 40px 40px;
    margin-top: 20px;
    background-color: #111;
    overflow: hidden;
  }
  
  footer ul {
    width: fit-content;
    float: left;
    padding-left: 20px;
  }
  
  footer ul li {
    display: block;
    list-style: none;
  }
  
  footer ul li a {
    font-family: 'Sorts Mill Goudy', serif;
    font-size: 18px;
    color: #fff;
    line-height: 40px;
  }
  
  .footer-sm {
    width: 50px;
    float: right;
  }
  
  .footer {
    font-family: 'Sorts Mill Goudy', serif;
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin: 170px 0 0 0;
  }
  
  .footer-sm img {
    width: 100%;
    margin-bottom: 10px;
    display: block;
  }
  
  
  /* FOOTER RESPONESIVNESS */
  
  @media only screen and (min-width: 1000px) {
    footer ul li a {
      font-family: 'Sorts Mill Goudy', serif;
      font-size: 18px;
      color: #fff;
      line-height: 40px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;header&gt;
      &lt;div class="header-logo"&gt;
        &lt;a href="index.html"&gt; &lt;img src="https://milestonehackers.com/img/Milestonehackers.jpg" alt="Milestonehackers logo"&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;nav div class="home-link"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;nav&gt;
        &lt;div class="hamburger-toggle"&gt;
          &lt;ul&gt;
            &lt;a href="#" class="nav"&gt;
              &lt;div class="one"&gt;&lt;/div&gt;
              &lt;div class="two"&gt;&lt;/div&gt;
              &lt;div class="three"&gt;&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div id="hamburger"&gt;
          &lt;li&gt;&lt;a href="podcasts.html"&gt;Podcast&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="newsletter.html"&gt;Newsletter&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="blog.html"&gt;Blog&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
        &lt;/div&gt;
        &lt;div class="sub"&gt;
          &lt;li&gt;&lt;a href="subscribe.html"&gt;Subscribe&lt;/a&gt;&lt;/li&gt;
        &lt;/div&gt;
        &lt;/a&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
  
    &lt;main&gt;
      &lt;section class="index-banner"&gt;
        &lt;div class="verticial-center"&gt;
          &lt;h1&gt;The Milestone Hackers Podcast&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/section&gt;
      &lt;div class="wrapper"&gt;
        &lt;section class="hero-section"&gt;
          &lt;h2&gt;What Can you Expect From our Podcast&lt;/h2&gt;
          &lt;p class="hero-paragraph"&gt;A host (meee, Paolo) interviewing various types of entrepreneurs or founders both technical and non-technical. Each entrepreneur has their own unique story that resulted in learning or experiencing something that can benefit our audience who may
            want to go down the entrepreneurial path!&lt;/p&gt;
        &lt;/section&gt;
      &lt;/div&gt;
    &lt;/main&gt;
    &lt;div class="wrapper"&gt;
      &lt;footer&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="podcasts.html"&gt;Podcast&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="newsletter.html"&gt;Newsletter&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="blog.html"&gt;Blog&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="footer-sm"&gt;
          &lt;a href="https://twitter.com/Milestonehacker"&gt;
            &lt;img src="img/twitter.png" alt="twiiter icon"&gt;
            &lt;a href="https://open.spotify.com/show/2ZiIxv5Mr83seTtNsg3LD9"&gt;
              &lt;img src="img/spotify.png" alt="spotify icon"&gt;
              &lt;a href="https://anchor.fm/s/ecb81f4/podcast/rss"&gt;&lt;/a&gt;
              &lt;img src="img/rss.png" alt="rss icon"&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;p class="footer"&gt;Copyright &amp;copy; 2019; All Rights Reserved&lt;/p&gt;
      &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>