html - ブロックの最後の要素の下にあるすべての空白を削除するには?

Question

これは非常にばかげた質問かもしれませんが、とにかく質問します。

ヘッダーのあるサイトで作業しています。上記のヘッダーの下部には、4 つのボタンを備えたナビゲーション バーが表示されます。ナビゲーション バーがヘッダーのすぐ下ではなく、下から 1 ピクセル上にあることを除いて、すべて問題ありません。

これはほんの小さな欠陥かもしれませんが、私は改善を目指しています。教えてください、どうすればこれを修正できますか?

HTML は次のとおりです。

<header>
  <ul id="nav">
    <li><a href="#" id= "home">Home</a></li><!--
    --><li><a href="#" id="sheets">Sheets</a></li><!--
    --><li><a href="#" id="export">Export</a></li><!--
    --><li><a href="#" id=  "help">Help</a></li>
  </ul>
</header>

そして、次のようにSassを使用します。

$nav-height: 2em
$header-height: 3em + $nav-height
$nav-button-width: 20%
$nav-padding: (100% - $nav-button-width * 4) / 2

*
  padding: 0
  margin: 0

html
  font-size: 16px

header
  position: relative
  top: 0
  height: $header-height
  background-color: blue

#nav
  position: absolute
  bottom: 0
  height: $nav-height
  width: 100%
  list-style: none
  background-color: blue
  text-align: center

  li
    display: inline

  a
    padding: 0.33em
    display: inline-block
    width: $nav-button-width
    height: inherit
    text-align: center
    background-color: purple
    color: orange

    &:hover
      background-color: indigo