WordPress – Why isn't my CSS menu animating when the checkbox is selected?

Clicking on the "Hamburger" button should make the menu, a styled flex, slide up from the bottom of the screen.

I have some styling here that’s imposed by WordPress, and other to help with managing styling at different screen sizes. I want to use Flexbox for the li elements for this reason.

I have copied the structure from working examples online. I don’t understand why it doesn’t work as implimented. I’m sure this is a stupid and obvious oversight. I haven’t been deep in hands-on web development for years.

<div class="e-nav">

<nav id="site-navigation" class="main-navigation">

<header id="menu-box" class="menu-drawer">

<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
    
    <?php
    wp_nav_menu( array(
        'theme_location' => 'menu-1',
        'menu_id'        => 'primary-menu',
    ) );
    ?>

</header>

</nav><!-- #site-navigation -->

That HTML outputs as:

 <nav id="site-navigation" class="main-navigation">

            <header id="menu-box" class="menu-drawer">

                <input class="menu-btn" type="checkbox" id="menu-btn"/>
                <label class="menu-icon" for="menu-btn">
                    <span class="navicon"></span>
                </label>

                <div class="menu-menu-1-container">
                    <ul id="primary-menu" class="menu">
                        <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33">
                            <a href="https://example.com/staging/5544/sample-page/">Archive</a>
                        </li>
                        <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32">
                            <a href="https://example.com/staging/5544/sample-page/">Projects</a>
                        </li>
                        <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">
                            <a href="https://example.com/staging/5544/sample-page/">Video</a>
                        </li>
                        <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">
                            <a href="https://example.com/staging/5544/shop/">Shop</a>
                        </li>
                        <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">
                            <a href="https://example.com/staging/5544/sample-page/">Follow</a>
                        </li>
                        <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31">
                            <a href="https://example.com/staging/5544/sample-page/">Colophon</a>
                        </li>
                        <li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-21">
                            <a href="https://example.com/staging/5544/">foo</a>
                        </li>
                    </ul>
                </div>
            </header>

        </nav>
        <!-- #site-navigation -->

    </div>

The CSS is as follows:

#e-page {
grid-template-columns: auto 100% auto;
}

.e-header {
grid-area: 1 / 1 / span 1 / span 3;
}

.e-content {
grid-area: 3 / 1 / span 1 / span 3;
}

.e-footer {
grid-area: 4 / 1 / span 1 / span 3;
}

.e-nav {
position: fixed;
left: 0;    
bottom: 0;
}

nav ul {
flex-wrap: wrap;
justify-content: left;
} 

nav li {
flex-basis: 50%;
}

nav li:nth-child(7) {
flex-basis: 100%;
}

.menu {
max-height: 12em;
transition: max-height .2s ease-out;
}

.menu-drawer .menu-icon {
cursor: pointer;
display: inline-block;
height: 3em;
width: 3em;
right: 0;
bottom: 0;
padding: 1em;
position: fixed;
user-select: none;
z-index: 3;
}

.menu-drawer .menu-icon .navicon {
background: #FFF;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 1em;
}

.menu-drawer .menu-icon .navicon:before {
background: #FFF;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}

.menu-drawer .menu-icon .navicon:before {
top: 1em;
}

.menu-drawer .menu-btn {
display: none;
}

.menu-drawer .menu-btn:checked ~ .menu {
max-height: 3em;
border: 1px solid red;
}

.menu-drawer .menu-btn:checked ~ .menu-icon .navicon {
transform: rotate(-45deg);
top: .5em;
}

.menu-drawer .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(90deg);
}

.menu-drawer .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
top: 0;
}