one link tag in my sidebar is clickable only at the bottom of it [closed]

I have a sidebar in which there are multiple links. all of the links work fine except the top one which is only clickable at some small area in the bottom of that link. Tried changing the order of the links but still the top one will be clickable only at the bottom of it.

I run the code in IOS safari so I do not know if it works on pc.

//sidebar
function openNav() {
  document.getElementById("mySidebar").style.width = "70vw";
  document.getElementById("main").style.marginLeft = "70vw";

  /*lower brightness for everything except sidebar*/
  document.getElementById("indexBox").style.filter = "brightness(50%)";
  document.getElementById("indexBox").style.webkitFilter = "brightness(50%)";
  document.getElementById("indexBox").MozFilter = "brightness(50%)";
  document.getElementById("mySidebar").style.filter = "brightness(100%)";
  document.getElementById("mySidebar").style.webkitFilter = "brightness(100%)";
  document.getElementById("mySidebar").style.MozFilter = "brightness(100%)";
}

/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
  document.getElementById("mySidebar").style.width = "0vw";
  document.getElementById("main").style.marginLeft = "0vw";
  document.getElementById("indexBox").style.filter = "brightness(100%)";
  document.getElementById("indexBox").style.webkitFilter = "brightness(100%)";
  document.getElementById("indexBox").MozFilter = "brightness(100%)";
}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  background-color: white;
  overflow-x: hidden;
  padding-top: 2vh;
  transition: 0.5s;
  box-shadow: 0 1px black;
}

.sidebar a {
  font-family: 'Heebo-Light';
  text-align: right;
  text-decoration: none;
  font-size: 2.2vh;
  color: #181818;
  display: block;
  transition: 0.3s;
  padding: 2vw;
  margin-right: 5vw;
  width: 100%;
  height: 9vh;
  background-size: 30% 80%;
  background-repeat: no-repeat;
  background-position-x: right;
  z-index: 2;
  pointer-events: all;
}

.sideBarText {
  margin-right: 16vw;
  margin-top: 0.9vh;
}

.sidebar .closebtn {
  position: absolute;
  top: 2vh;
  left: 0;
  font-size: 5vh;
  margin-left: 5vw;
  height: 5vh;
  width: 10vw;
  text-align: center;
}

.openbtn {
  right: 0;
  position: fixed;
  z-index: 1;
  font-size: 3vh;
  cursor: pointer;
  background-color: #001f41;
  color: white;
  border: none;
  height: 7vh;
  border-left: 1px solid grey;
}

#opnBtnT {
  transition: margin-right .5s;
}

<main id="indexBox">
<div id="mySidebar" class="sidebar">
  <img src="../../static/icon.png" alt="Logo" style="position: absolute; width: 60vw; height: 20vh; margin-top: -7vh; right: 0;">
  <hr style="margin-top: 6vh;">
  <div id="sidebarB">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
      <div style="margin-top: -3vh; color: rgb(19, 19, 19);">&times;</div>
    </a>
<!--The sideBar mentinoned is below:-->
    <a href="/" style="background-image: url('../../static/Sketches 57.png');  margin-left: -3vw; height: 9vh;">
      <div class="sideBarText">ראשי</div>
    </a>
    <a href="/reserve" style="background-image: url('../../static/Sketches 57.png');  margin-left: -3vw;">
      <div class="sideBarText">הזמנת מגרש</div>
    </a>
    <a href="#" style="background-image: url('../../static/הצטרפות 2 עם מסגרת.png');  margin-left: -3vw;">
      <div class="sideBarText">הצטרפות למגרש</div>
    </a>
    <a href="#" style="background-image: url('../../static/מפה 1 עם מסגרת.png');  margin-left: -3vw;">
      <div class="sideBarText">מפת מגרשים</div>
    </a>
    <a href="#" style="background-image: url('../../static/פרופיל עם מסגרת.png');  margin-left: -3vw;">
      <div class="sideBarText">הפרופיל שלי</div>
    </a>
    <a href="#" style="background-image: url('../../static/תאים עם מסגרת.png');  margin-left: -3vw;">
      <div class="sideBarText">תנאי שימוש</div>
    </a>
    <hr style="margin-top: 11vh;">
    <a href="/logout" style="position: absolute; background-image: url('../../static/יציאה 1 עם מסגרת.png'); transform: scale(0.9);  margin-left: -0.5vw;">
      <div class="sideBarText" style="font-size: 1.8vh; margin-top: 1.2vh;">התנתקות</div>
    </a>
  </div>
</div>

<div id="main">
  <button class="openbtn" onclick="openNav()"><div style="font-size: 3vh; margin-top: -0.5vh;">&#9776;</div></button>
</div>
</main>