Estilos do cabeçalho não aplicam no navegador chrome

Pessoal, já verifiquei o código css das aulas e não consigo achar o problema da aplicação dos estilos no menu do projeto. Os estilos não aplicam no menu de jeito nenhum. Abaixo vai o código do menu.css e do style.css:

menu.css

.menu__link {
    color: #333333;
    padding: .5rem 1rem;
}

.menu__link:hover, .menu__link.ativo {
    border-bottom: 2px solid #0073e6;
}

style.css

.app {
    background: #f1f1f1;
    display: grid;  
    font-family: Arial, Helvetica, sans-serif;
    grid-template-areas: /*Define template e cria areas*/
        "cabecalho"
        "conteudo"
        "rodape";
    grid-template-columns: auto; /*Define tamanho das colunas*/
    grid-template-rows: 50px 100vh auto;/*Define tamanho das linhas*/
}

.cabecalho {
    align-items: center;
    display: flex;
    grid-area: cabecalho;
    padding: 0 2rem;
}

.conteudo {
   grid-area: conteudo;
}

.rodape {
    grid-area: rodape;
}