Div isn't showing up with no errors popping up

Question

I'm trying to set up a menu but the div that toggles the menu isn't showing up

I'm trying to follow a tutorial where a guy sets up a menu, and he has a div in the top left with a menu icon. I've followed the code perfectly word for word in the html and css, and yet nothing appears on my screen. I do have the exact same image in the exact same folder that he does. Link to YT HTML & the Link to YT CSS

.btn-toggle-nav {
  width: 60px;
  height: 100%;
  background-color: #F98F39;
  background-image: url("img/menu.png");
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: center;
  cursor: pointer;
}
.btn-toggle-nav:hover {
  opacity: 0.5;
}

<nav class="nav-main">
 <div class="btn-toggle-nav"></div>
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Project</a></li>
  <li><a href="#">Biography</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</nav>

The expected result should be like he has in the video. Link to that

Answer 1

Try this. Add height in pixels.

  .btn-toggle-nav {
            width: 60px;
            height: 46px;
            background-color: #F98F39;
            background-image: url(img/menu.png);
            background-repeat: no-repeat;
            background-size: 40%;
            background-position: center;
            cursor: pointer;
            display: inline-block;
        }
        
        ul {
            display: inline-block;
        }
        
        .btn-toggle-nav:hover {
            opacity: 0.5;
        }

 <nav class="nav-main">
    <div class="btn-toggle-nav"></div>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Biography</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>