title: Changing Spacing of Individual List Elements
body: <p>I'm attempting to create a simple single-page website, however I'm having problems with spacing in the navbar (as seen below).</p>
  
  <p><img src="https://i.stack.imgur.com/Z9yqi.png"/></p>
  
  <p>Using an un-ordered list works fine until the list ends up behind the central logo. Using the current code adding an empty list creates too big a gap. Is it possible to change the spacing of individual list elements?</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>.navbar {
    position: fixed;
    top: 0;
    height: 11.5vh;
    width: 100vw;
    /* background-color: #07470B; */
    /* opacity: 0.96; */
    background: #f6f6f6;
    z-index: 10;
    padding: 0;
    margin: 0;
  }
  .navbar ul {
    list-style-type: none;
    margin: 0;
    padding-left: 5vw;
    padding-top: 3vh;
  }
  .navbarList {
    display: inline-block;
    width: 14vw;
    font-family: 'Raleway';
    font-size: 5vh;
    padding: 0;
    margin: 0;
  }
  .navbarList li {
    margin: 0;
  }
  .navbarList a {
    color:#989898;
    text-decoration: none;
  }
  .navbarList a:hover{
    color: #e68935;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body id="site"&gt;
  &lt;a href="#page1" class="smoothScroll"&gt;&lt;img id="logoTop" src="images/logoHead.png"&gt;&lt;/a&gt;
  &lt;div id="site"&gt;
    &lt;div class="navbar"&gt;
      &lt;ul&gt;
        &lt;!-- &lt;li class="navbarList"&gt;
          &lt;a href="#page1" class="smoothScroll"&gt;HOME&lt;/a&gt;
        &lt;/li&gt; --&gt;
        &lt;li class="navbarList"&gt;
            &lt;a href="#divEndPage1" class="smoothScroll"&gt;ABOUT&lt;/a&gt;
        &lt;/li&gt;
        &lt;!--&lt;li class="navbarList"&gt;&lt;/li&gt;--&gt;
        &lt;li class="navbarList"&gt;
            &lt;a href="#page3" class="smoothScroll"&gt;EVENTS&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="navbarList"&gt;
            &lt;a href="#page4" class="smoothScroll"&gt;GALLERY&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="navbarList"&gt;&lt;/li&gt;
        &lt;li class="navbarList"&gt;
          CONTACT
        &lt;/li&gt;
        &lt;li class="navbarList"&gt;
          CONTACT
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="navbarUnderline"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>