То, что у вас есть, сводится к разнице между блочным элементом div и встроенным элементом a, span etc и т. д. Вам фактически не нужны ни float, ни display-inline, поскольку a является встроенным элементом.

После того, как вы добавили display: block, вы заставили все свои встроенные элементы (якоря) вести себя как div ... из-за этого появился float: left, который заставлял их выглядеть строковыми встроенными элементами один слева от другого, но испортил фактическую навигацию. По сути, вы сами создали свою проблему.

Я немного изменил / почистил CSS:

nav {
  background-color: #0b98de;
  padding: 10px 0px 10px 0px;
}

nav a {
  font-family: sans-serif;
  font-size: 9px;
  color: white;
  padding: 15px 10px 10px 10px;
  text-decoration: none;
}

nav a:hover {
  background-color: #17b0cf;
}

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

Я думаю, что происходит, поскольку ваши элементы привязки были перемещены, вам нужно очистить плавающее значение родительского элемента, который в вашем случае является nav. Я воссоздал вашу навигацию, просто добавив класс clearfix.

https://codepen.io/anon/pen/xJPmyL

<div id = "navigation-bar">
  <header id = "header">
    <nav id = "nav-bar" class = "clearfix">
      <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>
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

Объяснение Clearfix - https://www.w3schools.com/howto/howto_css_clearfix.asp

Надеюсь это поможет.

Краткий ответ: потому что высота nav равна 0.

Он имеет нулевую высоту, потому что его содержимое перемещается. Плавающие элементы игнорируются при вычислении высоты их родительского элемента.

Хороший способ исправить это - добавить display: flex; к nav. В этом случае вложенные элементы будут автоматически отображаться как изогнутые, а не как плавающие.

Другой вариант - добавить float: left; к nav.

Flex лучше, потому что это современная, очень мощная и гибкая технология. Поплавки - это что-то из каменного века.

Ваш nav рушится на вас, поскольку не указаны ни высота, ни плавучесть. Просто добавьте это на свой nav:

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

  float: left; /* Either specify a height here or float - otherwise, this nav collapses on you */
}
  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;

  }

Используя это, вам не нужно беспокоиться о чистом классе, как упоминалось в других ответах - пишите меньше, делайте больше (я знаю, что это слоган jquery, но это также применимо здесь :))

Тогда ваш HTML будет выглядеть так:

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

Для nav идентификатор не требуется, и, поскольку у вас не было никакого CSS, примененного для navigation-bar и header, я пошел дальше и удалил это из вашего HTML, но если у вас действительно есть эти идентификаторы в вашем CSS, просто добавьте их повторно ... который будет выглядеть так для вашего HTML тогда:

<div id = "navigation-bar">
  <header id = "header">
    <nav>
      <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>