Why media query wont display flex for my mobile navigation? And I still don't get how to structure properly? Any guidelines suggestions or advice?

I am trying to build my website. I need to take the existing code for a website I already made, and make it compatible with mobile device viewing. For mobile display, the header is supposed to be converted into a different format. When I open my website my phone, the website is still displayed correctly. But when it hits below width of 767 pixel, the mobile nav wont turn on and display flex. It just goes blank and shows nothing

I've checked everything with CSS and HTMl. I followed the youtube video instructions step by step, and have to include everything, but for some reason, it is still not showing up correctly on mobile devices.

My code is as follows

HTML

    <header> 
        <div class="mobile">
            <ul class="navlist-mob">
                <li>
                    <div class="hamburger">
                        <span class="topline"></span>
                        <span class="bottomline"></span>
                    </div>
                </li>
                <li><img class="logo" src="./assets/logo.svg" height="38" width="38" alt="Kushal Chaudhari"></li>
                <li></li>
            </ul>
        </div>
        <div class="desktop">
            <ul class="navlist-desk">
                <li><a href="index.html" class = "nav-item-text">About</a></li>
                <li><a href="#" class = "nav-item-text">Projects</a></li>
                <li><a href="#" class = "nav-item-text">Timeline</a></li>
                <li><img class="logo" src="./assets/logo.svg" height="38" width="38" alt="Kushal Chaudhari"></li>
                <li><a href="#" class = "nav-item-text">Favourites</a></li>
                <li><a href="#" class = "nav-item-text">Blog</a></li>
                <li><a href="#" class = "nav-item-text">Contact</a></li>
            </ul>
        </div>
    </header>
    <!---------------------------------------------------- navigation ends ----------------------------------------------------->

SCSS

:root {
    --ghost_white: #f8f8ff;
  }

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-family: "Open Sans",sans-serif;
    font-size: .875rem;
    font-weight: 400;
}
body{
    background-color: var(--ghost_white);
}

header{
    z-index: 999;
    position: fixed;
    width: 100%;
    // background-color: var(--ghost_white);
    // apple background
    background-color: rgba(0,0,0,0.82);
    backdrop-filter: blur(2rem);
    height: 3rem;

    .logo{
        padding: 0.2rem;
    }


    .mobile{
        width: 100%;
        //margin: 0 auto;
        padding: 0 1.2rem;
        //display: none;

    .navlist-mob{
        padding: 0 3rem;
        font-family: "Roboto",sans-serif;
        font-size: 0.95rem;
        font-weight: 400;
        list-style: none; 
        display: none;
        align-items: center;  
        justify-content: space-between;
    }

    }



    .desktop{
        width: 100%;
        //margin: 0 auto;
        padding: 0 1.2rem;
    }

    .navlist-desk{
        padding: 0 3rem;
        font-family: "Roboto",sans-serif;
        font-size: 0.95rem;
        font-weight: 400;
        list-style: none; 
        display: flex;
        align-items: center;  
        justify-content: space-between;

        .nav-item-text{
            display: block;
            letter-spacing: 0.07rem;
            text-decoration: none;
            color: #fff;
        }

        .nav-item-text:hover {
            color: #afd275;
        }
    }


}





.container {
    padding-top: 3rem;
    width: 100%;
}
@media screen and(max-width: 767px){
    .navlist-mob{
        display: flex;
    }
    .desktop{
        display: none;
    }

} 

The header goes blank after 767 pixels when it is supposed to display flex for mobile navigation. Help!!!