Hamburger Menu not showing after screen 700px html/css/js front-end web dev

so I've been following along on this youtube tutorial cloning the Microsoft Website. I've been doing good so far but now I'm literally 30 seconds away from the tutorial ending, but I can't figure out why my hamburger menu isn't showing. Basically, once your screen width is < 700px the nav bar moves off the screen to the side and a button on the top right appears to toggle the button but when I press the button, the menu doesn't come back over if that makes sense.

Here is my css code:

        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background: #f2f2f2;
        width: 50%;
        height: 100%;
        border-right: #ccc solid 1px;
        opacity: 0.9;
        padding: 30px;
        transform: translateX(-500px);
    }

    .main-nav ul.main-menu li {
        padding: 10px;
        border-bottom: #ccc solid 1px;
        font-size: 14px;
    }

    .main-nav ul.main-menu li:last-child {
        border-bottom: 0;
    }

    .main-nav ul.main-menu.show {
        transform: translateX(-20px);
    }

And here is my JavaScript:

<script>
          document.querySelector('.menu-btn').addEventListener('click', () => document.querySelector('main-menu').classList.toggle('show'));
</script>