Olá Kelwin, tudo bem?

O que ocorre é que a classe .copyright não está sendo aplicada diretamente no elemento <footer> e sim em um dos seus elementos filho. Veja:

        <footer>
            <img src="logo-branco.png">
            <p class="copyright">© Copyright Barbearia Alura - 2019</p>
        </footer>

Dessa forma, estamos tentando captar o elemento <p> e não o <footer> para aplicar a estilização. Sendo assim, quando o código está da primeira forma que você colocou, a localização do elemento não é encontrada.

Podemos solucionar essa questão de diferentes formas.

- Opção 1

footer .copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px 0 0;
}

O espaço entre o footer e o .copyright indica que estamos setando um elemento filho de footer, a ausência do mesmo causa o erro que ocorreu no seu código.

- Opção 2

footer p.copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px 0 0;
}

Assim como no outro exemplo, estamos indicando com o espaço que é um elemento filho de footer, porém estamos deixando explícito qual é esse elemento.

- Opção 3:

p.copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px 0 0;
}

Por último, dessa forma estamos localizando de forma mais direta o elemento em questão.

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!