Foi defino para HTML font-size de 120%, os REM,s abaixo estão sendo definidos a partir de 20px ou pelo 120%?
Muito confuso esse assunto, deveriam ter exercícios bem direcionados/específicos para treinarmos.
insira se.titulo-principal {
font-size: 300%;
text-align: center;
background-color: #851944;
color: #FFF;
padding: 1.25rem;
border-bottom: .5rem solid #000;
}
Seguindo a lógica que mostrei no seu outro tópico, .5rem será o equivalente à metade da altura fonte da raiz. Que nesse caso é a tag <html>. Ou seja, é a metade dos 120%.
Imaginemos que o tamanho padrão da fonte que o usuário escolheu para o seu navegador é 10px. Ao colocar o font-size: 120%; na tag html, a fonte usada no seu site terá o tamanho de 12px (120% da fonte do navegador). Já dentro do seu código CSS, 0.5rem será equivalente a 6px (metade da fonte do html).