How can I add a logo to my website?

HTML-CSS
1

I want to add a logo where the red square is.https://imgur.com/a/8aEWM8Z

I tried making an h2 tag but then it moves my ul down below it and i don’t know how to make it so its side by side.

Bonus Question:

How do I make my image height bigger?

2 
<header>

  <div class="site-logo">
    <img src="https://via.placeholder.com/80" alt="logo">
  </div>
  <nav>

    <ul>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <a class="header-cases" href="#">Cases</a>

  </nav>

</header>


header {
  background-color: #fff;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
}

.site-logo {
  margin-left: 20px;
}

Usually, the height should be locked to the width to maintain the aspect ratio

.site-logo {
  width: 80%
  height: auto;
}