How can I add a logo to my website?

I want to add a logo where the red square is.

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?


  <div class="site-logo">
    <img src="" alt="logo">

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



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;