Dúvidas referente as classes CSS; | Front-end

Bom dia!

Conforme caso abaixo estou tentando realizar uma alteração na classe do H2 porém não obtenho sucesso, não consigo entender onde está meu erro;

No caso gostaria de alterar o H2 onde está escrito "Os animes nos ultimos anos", que faz parte da tag ARTICLE, com a classe "noticia-principal";

No CSS tento acionar a classe com .noticia-principal H2, mas ela não segue o estilo, ela mantém o estilo do H2 do .cabecalho-artigo que é classe do header;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title></title>
</head>
<body>
    <div class="interface">
        <header class="cabecalho">            
            <img class="logo" src="imagens/logo-1.png">  
            <h2>Animes peagabr</h2> 
            <img class="banner" src="imagens/banner.png">                 
        </header>
        <section id="corpo">
            <article class="noticia-principal"></article>
                <header class="cabecalho-artigo">
                    <hgroup>
                        <h3>Animes e mangás</h3>
                        <h1>Saiba tudo sobre Animes</h1>
                        <h2>Por Pedro Henrique</h2>
                    </hgroup>                    
                </header>
                <h2>Os animes nos últimos anos</h2>
                <p>Mesmo com todas as dificuldades pelas quais a indústria de entretenimento passou com a pandemia do Covid-19, o ano de 2020 não decepcionou em termos de bons animes. 
                E 2021 segue o mesmo caminho, para alegria dos fãs do gênero. 
                Confira 12 ótimas opções de animes para conferir este ano, contando também com novidades que ganhamos no ano passado.</p>
            </article>

        </section>
        <aside class="sessaoLadoDireito">

        </aside>
        <footer class="sessaoRodape">

        </footer>
    </div>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300;1,400&display=swap');
@font-face {
    font-family: 'Barlow', sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    background: #dddddd;
}

.interface {
    width: 900px;    
    margin: -20px auto 10px auto;  
    background-color: #bbbbbb;
    box-shadow: 0px 0px 10px rgba(0,0,0.5);
    padding: 10px;
}

p {
    text-align: justify;
    text-indent: 50px;
}

.cabecalho {  
    display: flex;
    align-items: center;   
    padding: 10px;
}

.cabecalho h2{     
    font-family: 'Barlow';
    position: absolute;
    margin-top: 120px;
    margin-left: -85px;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px #000000;    
}

.logo{
    width: 80px;
    height: 80px;
    display: flex;
    position:absolute;
    left: 255px;
}

.banner {
    margin-left: 175px;
    width: 60%;
    border-radius: 10px;     
}

section#corpo {
    display: block;
    width: 500px;
    float: left;
    border-right: 1px solid black;
    padding-right: 15px;
}

.noticia-principal h2{
    font-size: 13pt;
    color:red;
    background-color: #ffffff;

}

.cabecalho-artigo h1{
 font-family: 'Barlow', sans-serif;
 font-size: 20pt;
 color:#606060;
 }

.cabecalho-artigo h2{
    font-size: 13pt;
    color: #cecece;
    background-color: #ffffff;
    margin-bottom: 0px;
    margin-top: 0px;
}

.cabecalho-artigo h3{
    font-size: 12px;
    color: #606060;
}

.sessaoLadoDireito {

}

.sessaoRodape{

}

Olá Pedro, como vai?

Olhando seu código aqui consegui descobrir o que aconteceu. Quando você abriu a tag article acabou fechando ela na mesma linha e depois novamente no final do conteúdo:

        <article class="noticia-principal"></article>     //primeiro fechamento
                <header class="cabecalho-artigo">
                    <hgroup>
                        <h3>Animes e mangás</h3>
                        <h1>Saiba tudo sobre Animes</h1>
                        <h2>Por Pedro Henrique</h2>
                    </hgroup>                    
                </header>
                <h2>Os animes nos últimos anos</h2>
                <p>Mesmo com todas as dificuldades pelas quais a indústria de entretenimento passou com a pandemia do Covid-19, o ano de 2020 não decepcionou em termos de bons animes. 
                E 2021 segue o mesmo caminho, para alegria dos fãs do gênero. 
                Confira 12 ótimas opções de animes para conferir este ano, contando também com novidades que ganhamos no ano passado.</p>
        </article>                                      //segundo fechamento

Como o HTML identifica a primeira tag de fechamento está desconsiderando a segunda e fazendo com que seu código fique fora da tag article, por isso a estilização não funcionou.

Pra resolver o problema é só eliminar o primeiro fechamento que está na mesma linha da tag de abertura. O código dessa parte ficaria assim:

        <article class="noticia-principal">
                <header class="cabecalho-artigo">
                    <hgroup>
                        <h3>Animes e mangás</h3>
                        <h1>Saiba tudo sobre Animes</h1>
                        <h2>Por Pedro Henrique</h2>
                    </hgroup>                    
                </header>
                <h2>Os animes nos últimos anos</h2>
                <p>Mesmo com todas as dificuldades pelas quais a indústria de entretenimento passou com a pandemia do Covid-19, o ano de 2020 não decepcionou em termos de bons animes. 
                E 2021 segue o mesmo caminho, para alegria dos fãs do gênero. 
                Confira 12 ótimas opções de animes para conferir este ano, contando também com novidades que ganhamos no ano passado.</p>
        </article>

Testa aí e depois me conta se deu certo =)

Espero ter ajudado e se tiver alguma dúvida fique a vontade para mandar aqui no fórum. Bons estudos! =)

Chegou a hora de transformar