CSS停用具有不相关行的href链接，“left：0;”

Question

我主页上的两个div包含导航元素：.header-nav和.visualizer.bars导航。出于某种原因，我的.header-nav链接未激活，我已将罪魁祸首缩小到我的css文件中的一行：.bars {left:0;}。

当我删除此行时，我的.header-nav中的链接正常工作。我不知道是什么链接这两个div元素，但我需要这条线来使可视化效果正常工作。

我在研究中看到的所有内容都表明JavaScript存在问题，但取消链接JS不会影响href，所以我不认为就是这样。

如何使用正确的样式保持所有链接处于活动状态？

https://jsfiddle.net/vespertron/Leebz05q/

HTML     

<header>
  <div class="header-left">
    <h3>This Is A Site </h3>
    <nav class="header-nav">
      <ul>
        <li>
          <a href="about.html">About</a>
        </li>
        <li>
          <a href="contact.html">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="header-right">
    <form class="login">
      <fieldset>
        <input type="text" name="username" tabindex="1" placeholder="Username">
      </fieldset>
      <fieldset>
        <input type="text" name="password" tabindex="2" placeholder="Password">
      </fieldset>
      <fieldset>
        <button type="submit" tabindex="3" value="submit">Login</button>
      </fieldset>
    </form>
  </div>
</header>

<main>
  <p class="blurb">stuff that makes me sound like a badass</p>
  <div class="visualizer">
    <p>What am I up to?</p>
    <nav>
      <ul class="bars">
        <div class="bar">
          Link 1
          <li>
            <a href="#" target="_blank">
              <span class="link-spanner"></span>
            </a>
          </li>
        </div>
        <div class="bar">
          Link 2
          <li>
            <a href="#" target="_blank">
              <span class="link-spanner"></span>
            </a>
          </li>
        </div>
        <div class="bar">
          Link 3
          <li>
            <a href="http://www.dappergrind.com" target="_blank">
              <span class="link-spanner"></span>
            </a>
          </li>
        </div>
        <div class="bar">
          Link 4
          <li>
            <a href="#" target="_blank">
              <span class="link-spanner"></span>
            </a>
          </li>
        </div>
        <div class="bar">
          Link 5
          <li>
            <a href="#" target="_blank">
              <span class="link-spanner"></span>
            </a>
          </li>
        </div>
      </ul>
    </nav>
  </div>
</main>

<footer>
  <span>Copyright &copy; 2018, Entity</span><br />
  <a href="privacy.html">Privacy</a>
</footer>

<script src="js/script.js"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
  var showWidth = 1;

  if(showWidth == 1) {
    $(document).ready(function() {
      $(window).resize(function() {
        var width = $(window).width();
        document.getElementById('output_width').innerHTML="Window Width:"+width.toString();
      });
    });
  }
</script>

CSS

html,
body {
  background-color: #22201d;
  background-image: url(../img/leather.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  color: #b7b7b6;
  font-family: 'Playfair Display SC', serif;
}

a {
  color: #686766;
  text-decoration: none;
}

a:hover {
  color: #b7b7b6;
}

a:after {
  color: #141311;
}

li {
  list-style: none;
}

header {
  height: 100px;
  letter-spacing: 1em;
}

.header-left {
  float: left;
}

form {
  float: right;
}

fieldset {
  border: 0 none;
}

input[type=text] {
  float: right;
  color: #686766;
}

.header-nav ul {
  clear: both;
}

.header-nav li {
  float: left;
}

main p.blurb {
  font-size: 2rem;
  text-align: center;
  letter-spacing: 1em;
}

.visualizer {
  text-align: center;
  font-weight: bold;
  letter-spacing: .5em;
}

.bars {
  position: fixed;
  top: 30px;
  right: 0;
  bottom: 75px;
  left: 0;
  margin: 10px auto;
  text-align: center;
  overflow: hidden;
}

.bars::before {
  content: "";
  display: inline-block;
  height: 100%;
}

.bar {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  width: 15%;
  height: 50%;
  min-height: 30px;
  background: #800000;
  opacity: 0.7;
  -moz-opacity: 70%;
  -webkit-opacity: 70%;
  -webkit-transition: height 0.5s ease-out;
  color: #141311;
  padding-top: 10px;
  font-family: 'Anton', sans-serif;
  font-size: 1.75em;
  writing-mode: vertical-lr;
  text-orientation: upright;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0;
  transition: 0.75s ease-out;
  box-shadow: 0px -3px 4px #141311;
}

.bar:hover {
  opacity: 1;
  -moz-opacity: 100%;
  -webkit-opacity: 100%;
  color: #b7b7b6;
  transition: .25s ease-in-out;
}

.bar:after {
  color: #686766;
}

.link-spanner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

footer {
  position: fixed;
  height: 75px;
  width: 100%;
  bottom: 0;
  text-align: center;
  letter-spacing: .2em;
}