Как удалить лишнее невидимое пространство из div внутри div, сделав его такой же высоты, как родительский div?

Question

Я делаю простую верхнюю панель навигации с изображением слева и кнопками справа. Вот HTML:

.topnav {
  background-color: #333;
  overflow: hidden;
}

#logo {
  float: left;
}

.topnav img {
  height: 4.5rem;
  padding-left: 35px;
}

#nav {
  overflow: hidden;
  float: right;
  padding: 10px 35px 10px 0px;
}

<div class="topnav">
  <div id="logo">
    <img src="./img/logo.png"></img>
  </div>
  <div id="nav">
    <a class="active" href="#home">Home</a>
    <a href="products">Products</a>
    <a href="contact">Contact</a>
    <a href="about">About</a>
  </div>
</div>

Проблема в том, что, когда я проверяю #nav, там есть это маленькое невидимое пространство внизу после заполнения. Что я сделал не так или что мне нужно сделать, чтобы это исправить?

РЕДАКТИРОВАТЬ: новый скриншот с выявленным зазором. Он находится между отступом (как показано светло-зеленым) и нижней частью # topnav

Answer 1

Как @ TemaniAfif предложил:

Изображение выше, чем в меню. Уменьшите высоту изображения, увеличьте отступы, например, c