Исправьте пробел в меню гамбургеров

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>