htmlcssnavigationmarginpadding

Remove white space from the sides and top of my navbar

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...

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:

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 */
}
    <nav> <!-- begin navigation element -->
      <div id="menu"> <!-- create and start new element with the id: menu -->
        <ul> <!-- begin unordered list -->
          <li><a href="index.html">Home</a></li><!-- list items -->
          <li><a href="WebsiteCompetitions.html">Competitions</a></li>
          <li><a href="WebsiteBuilds.html">Builds</a></li>
          <li><a href="WebsiteImages.html">Images</a></li>
          <li><a href="WebsiteVideos.html">Videos</a></li>
          <li><a href="WebsiteComm.html">Fight Club</a></li>
          <li><a href="WebsiteArticles.html">Articles</a></li>
          <li><a href="/mybb">Forums</a></li>
          <li><a href="WebsiteTools.html">Tools</a></li>
          <li><a href="WebsiteNews.html">News</a></li>
          <li><a href="WebsiteOffers.html">Shop</a></li>
          <li><a href="cooperators.html">Allies</a></li>
          <li><a href="WebsiteMore.html">More</a></li>
        </ul> <!-- end the unordered list -->
      </div> <!-- end the 'menu' element -->
    </nav> <!-- end navigation element -->

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,

Solution

  • Is this what you're looking for?

    Link to JSFiddle

    If so, in your CSS. Add this

    body {
   margin: 0px;
}