problema con encabezado y footer

Hola chicos como muchos me di cuenta de que cambiaron unas cosas para solucionar eso, pero en mi código no cambia no sé si me puedan ayudar no encuentro el error y aparte el encabezado no hace el cambio de border bottom para que salga el resaltado del menú del header, les dejo mi style si alguien encuentra el error se lo agradezco montón!

.app {
    background: #DFEBBB;
    font-family: Arial, Helvetica, sans-serif;
    display: grid;
    grid-template-areas: 
    'encabezado'
    'contenido'
    'rodapie';
    grid-template-columns: auto;
    grid-template-rows: 50px 100vh auto;/*hay cambios que afectan 100vh funciona bien*/
    /*facil para definir arear y modificarlas mas rapidamente*/
}

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

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

}

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

.contenido {
    grid-area: contenido;
    padding: 0 2rem;
}

.rodapie { 
    background: #f1f1f1;
    color: #333333;
    grid-area: rodapie;
    padding: 1rem;
    text-align: center;
}