Problemas con los estilos css, lo que pongo debajo de menu__link--inside en el css no funciona, si lo pongo arriba del menu si

¿Los estilos en css se pueden ir cargando según convenga? 

Es decir poner los estilos del cuerpo, el footer y a lo último la barra de navegación? Porque al ponerle js a la barra de navegación lo que pongo debajo del nav no me carga el css. Para que se entienda, puse un estilo a un h2 y como lo ubiqué después del css del menú desplegable al recargar la pagina lo ignora, pero si lo pongo más arriba, antes del menú si me lo toma.
  

 <!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    (function(){
        const listElements = document.querySelectorAll('.menu__item--show');
        const list = document.querySelector('.menu__links');
        const menu = document.querySelector('.menu__hamburguer');

        const addClick = ()=>{
            listElements.forEach(element =>{
                element.addEventListener('click', ()=>{

                    
                    let subMenu = element.children[1];
                    let height = 0;
                    element.classList.toggle('menu__item--active');


                    if(subMenu.clientHeight === 0){
                        height = subMenu.scrollHeight;
                    }

                    subMenu.style.height = `${height}px`;

                });
            });
        }

        const deleteStyleHeight = ()=>{
            listElements.forEach(element=>{

                if(element.children[1].getAttribute('style')){
                    element.children[1].removeAttribute('style');
                    element.classList.remove('menu__item--active');
                }

            });
        }


        window.addEventListener('resize', ()=>{
            if(window.innerWidth > 800){
                deleteStyleHeight();
                if(list.classList.contains('menu__links--show'))
                    list.classList.remove('menu__links--show');

            }else{
                addClick();
            }
        });

        if(window.innerWidth <= 800){
            addClick();
        }

        menu.addEventListener('click', ()=> list.classList.toggle('menu__links--show'));



    })();

<!-- language: lang-css -->

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');


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

    body{
        font-family: 'Poppins', sans-serif;
    }
    /*
    este estilo se applica al estar arriba del menu*/
    .img_destino{
        height: 300px;
        width: 400px;
    }
    .menu{
        background-color: #1A202C;
        color: #fff;
        height: 70px;
    }

    .menu__container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        max-width: 1200px;
        height: 100%;
        margin: 0 auto;
    }

    .menu__links{
        height: 100%;
        transition: transform .5s;
        display: flex;
    }

    .menu__item{
        list-style: none;
        position: relative;
        height: 100%;
        --clip: polygon(0 0, 100% 0, 100% 0, 0 0);
        --transform: rotate(-90deg);
    }

    .menu__item:hover{
        --clip: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        --transform: rotate(0);
    }

    .menu__link{
        color: #fff;
        text-decoration: none;
        padding: 0 30px;
        display: flex;
        height: 100%;
        align-items: center;
    }

    .menu__link:hover{
        background-color: #5e7094;
    }


    .menu__arrow{
        transform: var(--transform);
        transition: transform .3s;
        display: block;
        margin-left: 3px;
    }

    .menu__nesting{
        list-style: none;
        transition:clip-path .3s;
        clip-path: var(--clip);
        position: absolute;
        right: 0;
        bottom: 0;
        width: max-content;
        transform: translateY(100%);
        background-color: #000;
    }

    .menu__link--inside{
        padding: 30px 100px 30px 20px;
    }

    .menu__link--inside:hover{
        background-color: #798499;
    }

    .menu__hamburguer{
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 15px;
        cursor: pointer;
        display: none;
    }

    .menu__img{
        display: block;
        width: 36px;
    }

    @media (max-width:800px){
        .menu__hamburguer{
            display: flex;
        }

        .menu__item{
            --clip:0;
            overflow:hidden ;
        }

        .menu__item--active{
            --transform: rotate(0);
            --background: #5e7094;
        }

        .menu__item--show{
            background-color: var(--background);
        }


        .menu__links{
            position: fixed;
            max-width: 400px;
            width: 100%;
            top: 70px;
            bottom: 0;
            right: 0;
            background-color: #000;
            overflow-y: auto;
            display: grid;
            grid-auto-rows: max-content;
            transform: translateX(100%);
        }

        .menu__links--show{
            transform: unset;
            width: 100%;
        }

        .menu__link{
            padding: 25px 0;
            padding-left: 30px;
            height: auto;
        }

        .menu__arrow{
            margin-left: auto;
            margin-right: 20px;
        }

        .menu__nesting{
            display: grid;
            position: unset;
            width: 100%;
            transform: translateY(0);
            height: 0;
            transition: height .3s;
        }

        .menu__link--inside{
            width: 90%;
            margin-left: auto;
            border-left: 1px solid #798499;
        }

    /*Este estilo no se aplica*/

    h2{
        font-family: 'Times New Roman', Times, serif;
    }

    }

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html lang="es">
    <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">
        <title>Menu desplegable</title>
        <link rel="stylesheet" href="css/estilos.css">
    </head>
    <body>
        <nav class="menu">
            <section class="menu__container">
                <h1 class="menu__logo">Viajes</h1>

                <ul class="menu__links">
                    <li class="menu__item">
                        <a href="#" class="menu__link">Home</a>
                    </li>
        
                   
        
                    <li class="menu__item  menu__item--show">
                        <a href="#" class="menu__link">Continentes  <img src="assets/arrow.svg" class="menu__arrow"></a>
        
                        <ul class="menu__nesting">
                            <li class="menu__inside">
                                <a href="#" class="menu__link menu__link--inside">Europa</a>
                            </li>
                            <li class="menu__inside">
                                <a href="#" class="menu__link menu__link--inside">America</a>
                            </li>
                            <li class="menu__inside">
                                <a href="#" class="menu__link menu__link--inside">Asia</a>
                            </li>
                            <li class="menu__inside">
                                <a href="#" class="menu__link menu__link--inside">Africa</a>
                            </li>
                            <li class="menu__inside">
                                <a href="#" class="menu__link menu__link--inside">Oceania</a>
                            </li>
                        </ul>
                    </li>
        
                    <li class="menu__item">
                        <a href="#" class="menu__link">Iniciar</a>
                    </li>
                    <li class="menu__item">
                                    <a href="#" class="menu__link">Registrarse</a>
                                </li>
                </ul>

                <div class="menu__hamburguer">
                    <img src="assets/menu.svg" class="menu__img">
                </div>
            </section>

          
        </nav>

        <section class="cartas">
            <h2 class="titulos">Destinos Recomendados</h2>

            <div class="carta">
                <a href="#">
                    <img class="img_destino"src="cerro7colores.jpg" alt="">
                </a>
            </div>
        </section>

    <script src="js/app.js"></script>
        
    </body>
    </html>

<!-- end snippet -->