文字の箇所でしかクリックに反応しない

下記のようなコードを書いてみたのですがヘッダー、フッターの.nav liをクリックする際に文字の上のみでしかリンクに飛びません参考サイトを見る限りだと文字以外の枠線の内側でもリンクが機能しています。

hoverは動作しているのですが何がいけないのでしょうか？

よろしくお願いします。

@charset "UTF-8";

.wrapper {
  margin: 0 auto;
  max-width: 1280px;
}

.header {
  width: 100%;
}

.nav ul {
  padding: 0px;
}

.nav li {
  display: inline-block;
  list-style-type: none;
  width: 18%;
  text-align: center;
  margin: 0 1px;
  vertical-align: middle;
  border: solid 2px #444444;
}

.nav li:hover{
  background: #444444;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header>
    <a href="index.html" target="_parent"><img class="logo" src="img/logo.png" alt="logo">logo</a>

    <nav class="nav">
      <ul>
        <li><a href="index.html" target="_parent">A</a></li>
        <li><a href="b.html" target="_parent">B</a></li>
        <li><a href="c.html" target="_parent">C</a></li>
        <li><a href="d.html" target="_parent">D</a></li>
        <li><a href="e.html" target="_parent">E</a></li>
      </ul>
    </nav>
  </header>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>my</title>
  <link rel="icon" href="img/favicon.png">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="wrapper">
    <object class ="header" type="text/html" data="header.html"></object>
    <main>
    </main>
    <object class ="footer" type="text/html" data="footer.html"></object>
  </div>
</body>

</html>