title: Remove white space from the sides and top of my navbar
body: <p>I have looked around for many solutions and I am currently redoing the code of a website I own as I had all of my CSS individually laid out on each HTML page. Eventually I had too many pages to handle, and I decided to make a stylesheet to clean it all up but my EVERYTHING was a mess. Indentation, comments, etc...</p>
  
  <p>Currently, I am working on my Navigation Bar on the Website, but for some reason which I can't figure out (I've tried many things) the bar is positioned exactly in the middle which leaves a small amount of white space at the top, left and right of the bar. Here is the HTML:</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>ul { /* unordered list properties */
    list-style-type: none; /*takes out bullet points */
    margin: 0; /* scaling */
    padding: 0; /* scaling */
    overflow: hidden; /* clipping rules: https://www.w3schools.com/cssref/pr_pos_overflow.asp */
    background-color: #0c1f2e; /* colour */
  }
  li { /* list item properties */
    float: left; /* move item to the left */
    font-size: 14px; /* set the font size to 14 pixels */
  }
  li a { /* vertical style */
    display: block; /* display style */
    color: #ffffff; /* text colour */
    text-align: center; /* centres the text */
    padding: 19px; /* vertical padding */
    text-decoration: none; /* remove any text effects */
    font-family: 'Dosis', sans-serif; /* change the font to selected font: Dosis */
  }
  li a:hover { /* vertical style items when hovered upon by cursor properties */
    background-color: #639ddf; /* set the background colour */
    font-size: 20px; /*set the font size to 20 pixels */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;nav&gt; &lt;!-- begin navigation element --&gt;
        &lt;div id="menu"&gt; &lt;!-- create and start new element with the id: menu --&gt;
          &lt;ul&gt; &lt;!-- begin unordered list --&gt;
            &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;!-- list items --&gt;
            &lt;li&gt;&lt;a href="WebsiteCompetitions.html"&gt;Competitions&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="WebsiteBuilds.html"&gt;Builds&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="WebsiteImages.html"&gt;Images&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="WebsiteVideos.html"&gt;Videos&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="WebsiteComm.html"&gt;Fight Club&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="WebsiteArticles.html"&gt;Articles&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="/mybb"&gt;Forums&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="WebsiteTools.html"&gt;Tools&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="WebsiteNews.html"&gt;News&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="WebsiteOffers.html"&gt;Shop&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="cooperators.html"&gt;Allies&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="WebsiteMore.html"&gt;More&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt; &lt;!-- end the unordered list --&gt;
        &lt;/div&gt; &lt;!-- end the 'menu' element --&gt;
      &lt;/nav&gt; &lt;!-- end navigation element --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks all in advance, I hope I have provided enough info and please don't be too harsh with my over-commenting or anything just keep those opinions to yourself. As for my question structure and code, please correct me on anything I've done wrong and point out how I can fix. Thank you very much for taking your time to read this,</p>