Oii Marcelo, tudo certo?

A primeira dica que gostaria de te dar é que percebi que faltou a / no fechamento da sua div class="topo". É sempre bom se atentar ao fechamento das tags porque muitas vezes perdemos um bom tempo “apanhando” com algo que não está funcionando e acabamos descobrindo que na verdade foi um fechamento de tag que faltou.

Já para posicionarmos o seu nome no centro: existem muitas formas de se posicionar elementos com CSS, por exemplo, utilizar a propriedade margin, empurrando o elemento até centralizar. Esse método funciona, mas não é tão recomendável, por não ser tão flexível. Já existem maneiras mais eficientes de posicionar elementos, como o Flexbox, uma das formas mais práticas e fáceis de alinhar elementos que temos atualmente e que acredito que se encaixa bem na sua situação.

Para que funcione, começamos colocando todos os elementos do seu header que você quer que fiquem lado a lado dentro de divs individuais, desse jeito:

<div class="topo">

        <div><img src="imagens/celo.jpg" alt="Minha foto"></div>

        <div><h1>Marcelo da Costa Lemos - Profissional de T.I</h1></div>

        <div>
            <nav>                   
                <ul>
                    <li><a href="curriculo.html">Currículo</a></li>
                    <li><a href="https://www.linkedin.com/in/marcelo-lemos-353598240/">Linked In</a></li>
                    <li><a href="https://github.com/lemoscelo86">GitHub</a></li>
                </ul>
            </nav>
        </div>

    </div>

Perceba que eu coloquei tanto sua imagem, como seu nome e a barra de navegação dentro de divs separadas.

Agora no arquivo .css, começo alterando a div class="topo", que é a “mãe” das divs que separamos anteriormente para cada elemento, portando o que alteramos nela vai determinar como cada um dos elementos vai se posicionar:

.topo{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin: 0 auto;
}
nav{
    bottom: 0;
    right: 5%;
}

Aqui eu adicionei um display:flex, justamente para manipularmos o posicionamento do que está dentro da div topo e em seguida coloquei um justify-content: space-between;, que vai alinhar os 3 elementos: imagem, título e barra de navegação para que fiquem distribuídos com uma distância entre eles no header. Depois coloquei um align-items:center; que posiciona todos os elementos na mesma linha horizontal. Por fim eu retirei o position:absolute da nav, pois estava impedindo que ela se alinhasse. E com isso todos os seus elementos do header vão ficar alinhados e o título centralizado.

Caso você queira explorar mais as opções de alinhamento com CSS, deixo as seguintes recomendações de conteúdo:

• O drama do posicionamento de elementos na tela e o Flexbox;

• Entenda a propriedade Position CSS.

Espero ter solucionado sua questão.

Caso ainda tenha alguma dúvida, me coloco à disposição!

Um abraço e bons estudos!

Obrigado... vou estudar atentamente isso que você explicou e testar!!!

Perfeito Marcelo, qualquer dúvida estamos à disposição!