Dúvida - Meu portifólio no HTML e CSS | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

HTML

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Meu Portifólio</title>
  </head>
  <body>
    <header>
      <h1>Meu Portifólio</h1>
      <span>Kelvyn Emanoel</span>
    </header>

    <main>
      <div>
        <p>
          Olá, me chamo Kelvyn Emanoel, um profissional graduando em Tecnologia
          da Informação no 1º semestre pela Universidade Virtual do Estado de
          São Paulo - UNIVESP e graduado no curso de Design pela Universidade
          São Judas Tadeu - USJT.
        </p>
        <p>
          Descobri um forte interesse pela criação de aplicativos e sites
          durante a u.c. de design de interfases no curso de design, onde pude
          desenvolver visualmente um aplicativo. Movido pelo interesse em por em
          prática tais aplicações, resolvi estudar a área da programação.
          Atualmente estou fazendo um curso pelo Senac.
        </p>
      </div>
      <img src="eu.jpg" alt="Eu posando pra foto" />
    </main>

    <footer>
      <h2>Obrigado pela sua visita!</h2>
      <div>
        <p>
          Veja meu perfil no
          <span><a href="https://www.linkedin.com/in/kelvyn-emanoel-1b4723247/"target="_blank">Linkedin</a></span>
        </p>
      </div>
      <div>
        <p>
          Me siga no
          <span><a href="https://www.behance.net/kelvyncruz" target="_blank">Behance</a></span>
        </p>
      </div>

      <div>
        <p>
          Me siga no
          <a href="https://www.instagram.com/kel.emanuel_/" target="_blank">Instagram</a>
        </p>
      </div>
    </footer>
  </body>
</html>

CSS

body{
    background-color: cadetblue;
    color: azure;
    max-width: 70%;
    width: 100%;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
}

h1{
    letter-spacing: 5px;
    padding-top: 50px;
}

header span{
    font-size: 20px;
    color: burlywood;
    border: solid 2px;
    border-radius: 10px;
    padding: 5px;
}

img{
    width: 40%;
    height: 40%;
    border-radius: 80px;
    border: solid 1px;
    padding: 2%;
}

main{
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-bottom: 1%;
}

main p{
    max-width: 85%;
    letter-spacing: 2px;
    font-weight: 100;
}

footer{
    background-color: burlywood;
    height: 1px;
}

h2{
    letter-spacing: 5px;
    padding-top: 20px;
    max-width: 45%;
}

a{
    text-decoration: none;
    color: burlywood;
}

Está assim até agora. Quero deixar ele melhor e mais compacto o quanto puder. Queria dicas de como trabalhar com texto e link na mesma frase e "juntar" como se fossem um só pro CSS, pra quando tornar flexível e colocar o justify-content: space-between eles fiquem espaçados igualmente. Tô tentando a um tempinho aqui mas não tá dando certo.

Mergulhe em programação