Styling With CSS - Float Removing Styling

I'm new to web development and have discovered an issue that I cant find an answer for. I'm attempting to create a navigation bar following the following guide:

--> https://medium.freecodecamp.org/how-to-easily-build-mashables-navigation-bar-with-html-and-css-9e5007af786

My question is more for learning purposes as it just doesn't make much sense to me and I'm hoping someone can shed some light on it.

Here is the HTML for my example:

HTML

<div id="navigation-bar">
  <header id="header">
    <nav id="nav-bar">
      <a href="#">Tab1</a>
      <a href="#">Tab2</a>
      <a href="#">Tab3</a>
      <a href="#">Tab4</a>
      <a href="#">Tab5</a>
      <a href="#">Tab6</a>
      <a href="#">Tab7</a>
      <a href="#">Tab8</a>
    </nav>
  </header>
 </div>

When using CSS to style the guide reference turning each element into blocks using the display:block property and then floating them next to eachother. Much like the following:

<h1>CSS</h1>

nav {
  width: 100%;
  background-color: #0b98de;
}
  nav a {

    display: block;
    float:left;
    border: 1px solid #000;

    font-family: sans-serif;
    font-size: 9px;
    color: white;

    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;

    text-decoration: none;   
 }
  nav a:hover {

    background-color: #17b0cf;

  }

But what this appears to be doing is ignoring the properties in the nav block and only applying the properties in the nav a block. For this examples purpose it will leave nav bar white showing only the black border specified in the nav a block. It ignores the background color specified in the nav block and doesnt extend to width:100%. I've tried using the ID identifier as well as a class.

I have found a way to mitigate this by using display:inline-block as below but I still dont understand what the "hidden chain of command" is.

<h1>CSS</h1>
nav {
  width: 100%;
  background-color: #0b98de;
}
  nav a {

    display: inline-block;
    text-align:center;

    font-family: sans-serif;
    font-size: 9px;
    color: white;

    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;

    text-decoration: none;   
 }
  nav a:hover {

    background-color: #17b0cf;

  }