Glass morphism: Trying to get div to position on top of image

I'm playing around with glass morphism in CSS (SASS) and can't get the wrapping div (the 'glass') to show over the image.

The codepen doesn't want to grab the image for whatever reasons so that won't be of any help. Essentially, I want .header-box__blur to be the glass div over the .header-box__content div that will contain a header; ultimately blurring the image underneath

HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/main.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.8/lottie.min.js"></script>
    <script
    src="https://maxst.icons8.com/vue-static/landings/animated-icons/icons/eye/eye.json">
    </script>
    <title>Tyler Duke | Web Design</title>
</head>
<body>
    <nav>
        <ul class="nav-list">
            <li class="nav-list__logo"> </li>
            <li class="nav-list__item1">About Us</li>
            <li class="nav-list__item2">Shop</li>
            <li class="nav-list__item3">FAQ</li>
            <li class="nav-list__item4">Contact Us</li>
        </ul>
    </nav>

    <div class="header-box__blur">
        <div class="header-box__content">

        </div>
    </div>
</body>
</html>

CSS/SASS:

* {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
}

html,  
body {
    background-color: cadetblue;
    font-size: 24px;
}

.nav-list{
    background-color:darkgreen;
    display: flex;
    flex-direction: row;
    list-style-type: none;
    text-decoration: none;
    justify-content: center;
    box-shadow: black 0px 0px 30px;
    z-index: 500;
    order: 25;
}

.header-box__blur {
    display: flex;
    width: 100vw;
    height: 45vh;
    background: rgba(255, 255, 255, 0.246);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 13.0px );
    -webkit-backdrop-filter: blur( 13.0px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );    overflow: hidden;
    
    & .header-box__content{
        height: 45vh;
        width: 100vw;
        position: absolute;
        background-image: url('https://images.unsplash.com/photo-1590682700085-fbb1431a7629?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }


}