I want to increase the size of an image without increasing navigation bar height

I have created a webpage. However, my navigation bar's height increases or decreases when I change the size of my logo image. At the moment, the image size is small, but it has increased my navigation bar's height. It seems to have no issues when I put in a logo and class like this, Didacum I have tried several times to no avail. This problem occurs when I insert an image as a logo. What can I do to fix this?

HTML

<header class="header">

   <a href="home.html" class="logo"> <i><img src="images/dacum.png" alt="dacum"></i></a>

   <nav class="navbar">
      <div id="close-navbar" class="fas fa-times"></div>
      <div id="close-navbar" class="fas fa-times"></div>
      <a href="home.html">Home</a>
      <a href="teacher.html">Teacher Pro Dev't</a>
      <a href="education.html">Educational Research</a>
      <a href="student.html">Student Dev't</a>
      <a href="consulting.html">School Consulting</a>
      <a href="about.html">About</a>
      <!--<a href="courses.html">Courses</a>-->
      <a href="contact.html">Contact</a>
   </nav>

   <div class="icons">
      <div id="account-btn" class="fas fa-user"></div>
      <div id="menu-btn" class="fas fa-bars"></div>
   </div>

</header>


CSS

     .header {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      background: #fff;
      -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
              box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
      padding: 2rem 10%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      z-index: 1000;
    }
    
    .header img {
      margin-top: -10;
      margin-bottom: 0;
      width: 50px;
      height: 50px;
      padding-bottom: -20em;
    }
    
    .header .logo {
      margin-right: auto;
      font-size: 2.5rem;
      text-transform: capitalize;
      color: #444;
      font-weight: bolder;
    }
    
    .header .logo i {
      color: #0eb582;
    }
    
    .header .navbar {
      position: relative;
      border-radius: 10px;
    }
    
    .header .navbar #close-navbar {
      position: absolute;
      top: 1.5rem;
      right: 2rem;
      font-size: 4rem;
      cursor: pointer;
      color: #444;
      display: none;
    }
    
    .header .navbar #close-navbar:hover {
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
    }
    
    .header .navbar a {
      margin-right: 2rem;
      font-size: 2rem;
      text-transform: capitalize;
      color: #444;
    }
    
    .header .navbar a:hover {
      color: #0eb582;
    }
    
    .header .icons div {
      cursor: pointer;
      font-size: 2.5rem;
      color: #444;
      margin-left: 1.5rem;
    }
    
    .header .icons div:hover {
      color: #0eb582;
    }
    
    .header #menu-btn {
      display: none;
    }