修复汉堡菜单中的空白

Question

在我的代码中，我有一个响应式Nav，并且其中有一个汉堡菜单，但是条之间的间隙使它无法单击...我该如何解决？这是我的代码笔...

https://codepen.io/toastercreates/pen/ZmyVbX

<div class="nav"> <!-- Start of Nav Bar -->
  <div class="name-nav">
    <span>Lousiville Male<br>High School</span>
  </div>
  <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
  <div class="links-nav">
    <a href="#">About</a>
    <a href="#">Students</a>
    <a href="#">Staff</a>
    <a href="#">Clubs & Sports</a>
    <a href="#">Alumni</a>
    <a href="#">Brook N Breck</a>
  </div>
</div>