[Bug] Meu container título não desaparece nas telas menores que 1024px, nem as demais alterações | HTML e CSS: responsividade com mobile-first

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

.container__titulo {
    display: none;
}

.opções {
    display: none;
}

@media screen and (min-width: 1024px) {

.container__titulo,
.container__titulo--negrito {
    font-family: var(--fonte-secundario);
    font-size: 30px;
}
}

.container__titulo {
    font-weight: 400;
    display: block;
}

.container__titulo--negrito {
    font-weight: 700;
}

.opções {
    display: flex;
}

.opções__item {
    padding: 0 1em;
    text-transform: uppercase;
}

.opções__link {
    text-decoration: none;
    color: var(--preto);
}

<h1 class="container__titulo"><b class="container__titulo--negrito">ALura</b>Books</h1>
            </div>

            <ul class="opções">
                <li class=" opções__item">Categorias</li>
                <li class=" opções__item"><a href="#" class="opções__link">Favoritos</a></li>
                <li class=" opções__item"><a href="#" class="opções__link">Minha estante</a></li>
                
            </ul>

Alguém pode me ajudar, por gentileza? Obrigada!

Olá Letícia, como vai? Espero que sim!

Primeiro, é importante entender que as regras CSS que você define fora de uma media query são aplicadas por padrão, a não ser que sejam sobrescritas por regras dentro de uma media query que correspondam ao tamanho da tela do dispositivo. No seu caso, você quer que o .container__titulo seja ocultado em telas menores que 1024px e que seja exibido em telas maiores ou iguais a 1024px.

O problema no seu código é que você definiu .container__titulo { display: none; } e depois, fora de qualquer media query, redefiniu .container__titulo { display: block; }. Isso faz com que o título seja sempre exibido, independentemente do tamanho da tela, porque a regra de display: block está sobrescrevendo a regra de display: none.

Para corrigir isso, você deve remover a regra .container__titulo { display: block; } que está fora da media query. Assim, o título será ocultado por padrão e só será exibido quando a tela tiver 1024px ou mais, de acordo com a regra dentro da sua media query.

Aqui está o trecho corrigido do seu CSS:

.container__titulo {
    display: none;
}

@media screen and (min-width: 1024px) {
    .container__titulo,
    .container__titulo--negrito {
        font-family: var(--fonte-secundario);
        font-size: 30px;
        display: block; /* Esta linha garante que o título seja exibido em telas maiores */
    }
    .container__titulo {
        font-weight: 400;
    }
    .container__titulo--negrito {
        font-weight: 700;
    }
}

.opções {
    display: none;
}

.opções__item {
    padding: 0 1em;
    text-transform: uppercase;
}

.opções__link {
    text-decoration: none;
    color: var(--preto);
}

Não esqueça de verificar se as outras regras estão aplicando corretamente para os elementos .opções, .opções__item e .opções__link dentro da media query correspondente.

Faça essas alterações e veja se o problema foi resolvido.

Espero ter ajudado!

Caso tenha dúvidas fico à disposição.

Abraços e bons estudos!