Página de currículo como desafio final

Boa tarde.

Estou colocando em prática o conteúdo da aula criando um currículo como o professor exemplificou. Me surgiram alguma dúvidas. No curso o professor explicou que elementos do tipo inline aceitam conteúdo ao seu lado porém com inline não consigo definir espaçamento interno e externo por exemplo. Porém no código do curso se olharmos no style.css a parte do cabeçalho vamos observar que o professor definiu a nav li como inline e logo em seguida define uma margem a esquerda pro elemento. Como então inline não permite definir espaçamento interno e externo? Código do projeto da barbearia:

• css:

  nav li{
    display: inline;
    margin: 0 0 0 15px;
  }

• html:

   <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="produtos.html">Produtos</a></li>
                <li><a href="contato.html">Contato</a></li>
            </ul>
        </nav>

2) No curso o professor criou uma caixa para a logo e a navegação do cabeçalho. Depois ele definiu a position da nav como absolute. A minha dúvida é como centralizar essa nav na vertical de forma automática. O professor pegou o tamanho da imagem e dividiu no meio, mas tem uma forma mais fácil de fazer? Digo porque minha imagem tem 1279px de altura e quando dividi no meio a navegação foi lá para baixo porque eu não estou usando 100% do tamanho da minha imagem.

Código professor:

.caixa{
    position: relative;
    width: 940px;
    margin: 0 auto;
}

nav{
    position: absolute;
    top: 110px;
    right: 0;
}

Meu código: https://github.com/karolinagb/Curriculo-Karolina-Bento

Eu achei uma solução nesse site: https://www.w3.org/Style/Examples/007/center.pt_BR.html#vertical3 . Porém não entendi nada. Porque definir 50% pro top e depois no translate -50%??? Confuso.

"Para a marcação mostrada a seguir:"

<div class=container3>
  <p>Parágrafo…
</div>
A folha de estilos é conforme mostrada a seguir:
div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

"A chave para a solução é:
1.    Declare o container posicionado de forma relativa com a finalidade de criar um contexto de posicionamento para os elementos posicionados de forma absoluta dentro dele, container.
2.    Posicione o elemento dentro do container de forma absoluta.
3.    Declare, para o elemento dentro do container, coordenada 'top' de posicionamento igual a 50%. (Notar que 'top: 50%' significa 50% da altura do container.)
4.    Use 'translation' para deslocar o elemento dentro do container de um valor igual a metade da sua (do elemento) altura. (O valor '50%' em 'translate(0, -50%)' se refere à altura do próprio elemento.)"

3) Na imagem do cabeçalho da página index:

No css quando testei colocar block para a imagem, ela continua permitindo a tag nav do lado dela, isso estaria certo já que o block não permite conteúdos na lateral?

Meu html:

<header>
            <div class="conteudo-cabecalho">
                <img src="1.jpeg" alt="Foto de perfil para currículo" class="imagem-cabecalho">

                <nav>
                    <ul>
                        <li><a href="index.html">Sobre</a></li>
                        <li><a href="certificados.html">Certificados</a></li>
                        <li><a href="projetos.html">Proejtos</a></li>
                    </ul>
                </nav>
            </div>

        </header>

Meu css:

header{
    background: #1a1a1a;
    padding: 20px 0;
}

.conteudo-cabecalho{
    position: relative;
    width: 940px;
    margin: 0 auto;
}

.imagem-cabecalho{
    width: 15%;
    display: block;
}

nav {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}

nav li{
    display: inline;
    margin: 0 0 0 15px;
}