[Bug] Menu desktop: inserindo listas não está funcionando

Oi, Valdir, tudo bem?

Peço que você compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar de forma mais assertiva.

Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

Fico no aguardo!

Aqui está o link do meu projeto no GitHub: https://github.com/valdirsantos714/aluraplay

Oi, Valdir, tudo bem?

Desculpe a demora em te responder!

O problema no seu código acontece, por conta de algumas partes envolvendo o código do menu lateral. Fiz algumas alterações e deixo abaixo as mudanças que fiz para te ajudar:

.menu__container {
    position: fixed;
    bottom: 0%;
    height: 74px;
    width: 100%;
}

.menu__lista {
    display: flex;
    color: var(--font-color);
    height: 100%;
    background-color: blue;
    justify-content: space-around;
}

No código acima, adicionei algumas propriedades que não tinham sido adicionadas à classe menu__container, e reduzi o código referente a classe menu__lista.

@media (min-width: 834px) {
    .menu__lista {
        display: flex;
        color: var(--font-color);
        flex-direction: column;
        height: 100%;
        background-color: blue;
    }

    .menu__container {
        left: 0;
        height: auto;
        width: 74px;
        top: 80px;
    }
}

No código acima eu removi as classes menu__lista:nth-child(2), menu__lista:nth-child(3) e menu__lista:nth-child(4), adicionei as propriedades referentes à classe media__container e reduzi as propriedades adicionadas à classe menu__lista

@media (min-width: 1440px) {
    .menu__container {
        width: 239px;
        overflow: scroll;
    }

    .menu__lista:nth-child(2),
    .menu__lista:nth-child(3),
    .menu__lista:nth-child(4) {
        display: flex;
    }

    .menu__lista {
        height: auto;
        padding: 20px 17px 20px 15px;
        gap: 15px;
    }

    .menu__itens {
        font-size: 1.1rem;
        padding:2px;
        display: flex;
        gap: 15px;
        flex-direction: row;
        align-items: center;
    }

    .videos__container {
        display: flex;
        height: auto;
        flex-flow: row wrap;
        flex-grow: 1;
        gap: 20px;
    }

    .videos__item {
        justify-content: space-around;
        align-items: center;
        width: 500px;
        padding-bottom: 50px;
    }

    .descricao-video h3 {
        color: var(--font-color);
        font-size: 1.2rem;
    }

    .descricao-video p {
        color: var(--font-color);
    }
}

Por fim, revisei alguns valores nas classes adicionadas ao @media (min-width: 1440px) adicionei também as propriedades referentes à classe menu__container e reduzi o código na classe menu__lista.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!