A imagem não fica sobre o <h1> na página index

Rodrigo, beleza,

Olhei aqui teu código, seguem abaixo algumas sugestões, porém existem outras formas de acertar. Por favor se as sugestões abaixo servirem peço por gentileza marcar tópico como solucionado.

Conforme fizer as mudanças observe o resultado.

Vamos lá, primeiro ponto, no arquivo index.html, passe a tag main para baixo de head, o head vem antes do main.

Como esta:

    <main>

    <header class="titulo-principal">
        <img class="foto-home" src="img/eu.jpg" alt="Foto de João da Silva">
        <h1>João da Silva
        <p class="subtitulo-principal">Desenvolvedor web</p>
        </h1>
    </header>

Como deve ficar:

    <header class="titulo-principal">
        <img class="foto-home" src="img/eu.jpg" alt="Foto de João da Silva">
        <h1>João da Silva
        <p class="subtitulo-principal">Desenvolvedor web</p>
        </h1>
    </header>

    <main>

Aqui vai quebrar o código CSS que elaborou. Não é uma boa prática usar o CSS com os seletores descendentes como fez abaixo, pois se muda tua estrutura HTML o CSS pára de funcionar. Por outro lado todo teu CSS esta correto, então eu basicamente usei o mesmo código e apenas coloquei dentro de uma classe conforme sugere o HTML . Classe titulo-principal, que é chamada no header

Assim em site.css no CSS main h1:

main h1{
    font-size:3rem;
    background-color:#851944;
    color: #FAFFFA;
    text-align: center;
    font-family: "Arial", sans-serif;
    padding: 1.25rem;
    margin: 0;
    border-bottom: .5rem solid #000;
    text-transform: uppercase;
}

Altere para a classe titulo-principal

.titulo-principal {
    font-size:3rem;
    background-color:#851944;
    color: #FAFFFA;
    text-align: center;
    font-family: "Arial", sans-serif;
    padding: 1.25rem;
    margin: 0;
    border-bottom: .5rem solid #000;
    text-transform: uppercase;
}

Feito isto, eu percebi que esta aplicando o float: right na tag img. Isto força a imagem a flutuar a direita. Eu apenas removi a tag deste código CSS.

site.css

aside, img{
    float: right;
    border: .25rem solid #000;
}

Apenas remova o img

aside {
    float: right;
    border: .25rem solid #000;
}

Experimemente atualizar. Pronto o teu display: inline-block agora funciona e a imagem esta no centro.