Perde a formatação quando defino a classe navegacao-site (o cara acho a resposta, eu não)

o mesmo problema do outro colega:

quando eu altero em bio.html de:

<aside>

para:

<aside class="navegacao-site">

e no CSS de:

aside {
    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 20px;
    text-align: center;
}

para:

.navegacao-site {
    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 20px;
    text-align: center;
}

perde toda a formatação... (ou quase toda..só fica o fundo roxo NAS PALAVRAS..não no elemento todo)

Aí, resolvi colocar as duas coisas no CSS:

aside {
    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 20px;
    text-align: center;
}

.navegacao-site {
    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 20px;
    text-align: center;
}

Pareeece que funcionou. Mas se funcionou, foi meio na sorte (o que não é boa coisa, né..)

A ideia era ADICIONAR o .navegação-site no CSS ou ALTERAR o aside (apagar a palavra aside e colocar .navegação-site no lugar)? Fiquei meio confuso (claramente né haha)

Alguém consegue me elucidar, por favor? Valeu, abraços!