[Projeto] alinhando os elementos | HTML e CSS: Classes, posicionamento e Flexbox

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portifolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="apresentacao">

            <h1>Sou estudante de tecnologia.<strong class="titulo-destaque"> Aprender, ensinar e trabalhar em grupo é um dos fatores para o sucesso.</strong>
            </h1>
            <p>Foto da minha ex equipe onde ensinei e aprendir a trabalhar em grupo juntas</p>
            <a href="https://www.facebook.com/">facebook</a>
            <a href="https://github.com/Helaniajesus">Github</a> 
            <img src="img/Equipe Serv.webp" alt="Foto do time"width="500" height="400">   

    </main>
    <footer</footer>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
body{
    box-sizing: border-box;
    background-color: #8ecae6;
    color: #03045e;
    font: 20px Arial, sans-serif;
}
strong {
    color: red;
}
.bg-footer{
    background-color: #14213d;
    color: white;
}
.titulo-destaque{
    color: #ea1912;
}
.apresentacao{
    display: flex;
    align-items: center;
}