Why is there a huge clickable gap in between my logo and my navigation bar and how to get rid of it?

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
}

.nav-links,
.logo {
  text-decoration: none;
  color: #000;
}

.logo {
  max-width: 80%;
  width: 20%;
  height: 20%;
}

.navbar img {
width: 10%;
height: auto;
display: in-line block;
}

.navbar {
  padding: 20px;
  height: 50vh;
}

.navbar,
ul {
  display: flex;
  flex-direction: row;
}

ul li {
  padding: 0 5px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

<nav class="navbar">
  <a href="#"><img src="https://cdn.discordapp.com/attachments/714128376884887644/783384657366482954/Double20Hospital20Doors20push20plate20and20kickplate.png" alt=""></a>
  <div class="wrapper">
    <ul class="main-nav" id="js-menu">
      <li>
        <a href="#" class="nav-links">Home</a>
      </li>
      <li>
        <a href="#" class="nav-links">Products</a>
      </li>
      <li>
        <a href="#" class="nav-links">About Us</a>
      </li>
    </ul>
    <ul class="ul2">
      <li>
        <a href="#" class="nav-links">Contact Us</a>
      </li>
      <li>
        <a href="#" class="nav-links">Blog</a>
      </li>
    </ul>
  </div>
</nav>

Above is my code, as you can see there's a huge gap in between my image and the above highlighted below:

It also seems like the white space in between it is clickable. I want to get rid of it so it looks like this instead (keeping the spacing in between about us and contact us but removing the spacing between the image and Home):

I tried getting rid of all padding and changing my logo to inside my unorder list, but that didn't do anything.