[Dúvida] Projeto mão na massa.

HTML

<!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>Potifolio de Stephanie</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
      <div class="titulo">
        <div class="subtitulo">
      <h1>Bem-vindo ao meu site</h1>
      <p>Eleve seu negócio digital a outro nível com um <span>Front-end de qualidade!</span></p>
      </div>
    </header>
    <main>
        <div class="nome">
            <div class="img"></div>
        <h2>Stephanie Monteiro</h2>
        <img src="Imagem.png" alt="Foto profissional figma">
        </div>
        <p>Olá! Sou Stephanie, designer e desenvolvedora Front-end com especialidade em <strong>React, HTML, CSS e Figma</strong>. Foco na criação de interfaces organizadas, responsivas e bem estruturadas. Tenho atenção aos detalhes e pensamento analítico, o que me permite evoluir rapidamente na área de tecnologia. Ajudo pequenos negócios a colocarem em prática boas ideias. Vamos conversar?</p>
         <div class="botoes">
        <a href="http://127.0.0.1:5500/index.html" class="btn">Instagram</a>
        <a href="http://127.0.0.1:5500/index.html" class="btn">Github</a>
        </div>
    </main>
    <footer>
        <p><strong>© 2026 - Desenvolvido por Stephanie</strong></p>
    </footer>
</body>
</html>

CSS

* { 
    padding: 0;
}
body {
    background-color: rgb(0, 0, 0);
    color: #FFFFFF;   
    margin: 0;
}
strong {
    color: #22D4FD;
}
p {
    font-weight: bold;
}
span {
    color: #ffef3c;
    border: 1px solid#ffef3c;
    padding: 10px;
}
a {
    color: #ffffff;
    background-color: #22D4FD;
    border: 1px solid#005cc5;
    padding: 12px 25px;
    border-radius: 30px;
}
.botoes {
  display: flex;
  justify-content: center;
  gap: 20px; 
}
.titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.nome {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #89f5ff;
    font-weight: bolder;
    font-family:'Times New Roman', Times, serif;
    text-decoration: underline;
}
img {
    max-width: 50%;
    height: auto;
    border-radius: 8px;
}
footer {
    background-color: #585858;
    display: flex;
    flex: 1;
    margin-top: 40px;
}

Eu já tinha colocado a margem como 0 em body, depois que assiste essas ultima aulas vi que pode ser colocado em cima com * , e quando tetei colocar e retirar do body tirou todo o espaçamento que eu tinha criado e juntou o título com os outros elementos. Fiz algo errado ou só fiz diferente e separado?

Olá, Stephanie, como vai?

O comportamento ao utilizar o seletor universal para zerar margens e preenchimentos é o esperado. Os navegadores aplicam estilos padrões aos elementos, como margens em títulos e parágrafos, e ao utilizar o asterisco, você remove essas definições de todos os componentes simultaneamente. Ao retirar o comando do corpo do documento e aplicar globalmente, os espaçamentos automáticos que mantinham os elementos afastados deixam de existir, resultando na aproximação visual mencionada.

Para manter o layout organizado após o reset, é necessário definir manualmente os espaçamentos desejados para cada classe ou tag. Uma boa prática é utilizar o seletor universal para garantir o controle total sobre o design, evitando que cada navegador exiba o site de uma forma ligeiramente diferente.

Por exemplo:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Seu código demonstra uma boa organização das seções e o uso correto de Flexbox para alinhamento. Continue compartilhando sua evolução conosco.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Tópicos relacionados

Conteúdos Alura com o tema