How would I properly style the nav bar to be closer to the edge

Question

I'm having issues with my nav bar, I'm wondering how I can make the set closer to the left most edge.

CSS:

#nav
{
   overflow: auto;        
   user-select: none;
   background: grey;
   width: 100%;
}
#nav li
{
   display: inline-block;
   list-style-type: none;   /* removes bullets */
   padding: 10px;            
   margin: 0px;             /* removes margins */
   background: grey;
}
#nav li:hover
{
   background: green;
   user-select: green;
}

Fiddle: https://jsfiddle.net/yumyum0/cgx61w0q/2/

Also, I'm not sure if the background and user select in the #nav li:hover is redundant. I'm modeling it off of the tutorial on https://html.com/css/#example-nav, and I started to add things to try and style it the way I wanted. I'm still a long ways away from knowing what all of the declarations do. It used to be flush so I think I probably added something that has a conflict, or I removed it without knowing.

I also had a question that wasn't really related to this, is this formatting okay? I wasn't sure if there was a agreed upon way with brackets and everything else.

Answer 1

A good thing to do is set the styles for the HTML and Body tags. This is what I would do:

html, body {
  margin: 0; // Removes space on the sides
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

#nav 
{
  overflow: auto;
  user-select: none;
  background: grey;
  width: 100%;
  box-sizing: border-box; // Add this to take 100% width without overflowing
  margin: 0; // Remove space above nav bar
}

...rest of your CSS