ul centralizada e juntar o main o header e o footer | Front-end

Eu tentei centralizar a ul que está no header porém com o display flex, ela não centraliza.

Consigo deixar o Header/Main/Footer juntos pra ficar mais elegante o layout ? como ?


HTML:

    <header>
   <ul>
<li>Conheça o curso</li>
  <li>Blog</li>
    <li>Empresas Parceiras</li>
      <li>Ong's e Comunidade</li>
   </ul>
    </header>

       <main>
         <h1>GrowKids</h1>
         <h2>Where your little star illuminates a world of possibilities</h2>
       </main>

            <footer>
                
              <img src="logo_growdev.svg" alt="">
               </footer>

</body>

</html>

CSS:


header {

      background-color: #613DCA;
      padding: 50px;
      text-align: center;
}

header ul {

     display: flex;
     list-style: none;
     gap: 25px;
     text-align: center;
} 

main {

    background-color: #E7516C ; color: white;
    margin: 0px;

}

footer {
    margin: 0px;
    background-color: #613DCA; color: white;

}

Imagem no navegador:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Exemplo de como quero deixar:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Oii Matheusl, como vai você?

Para centralizar a ul no header utilizando display: flex, você precisa garantir que o container (header) também esteja configurado para alinhar seus itens centralmente. Além disso, para unir visualmente o header, main e footer, você pode ajustar as margens e o espaçamento entre eles. Vamos às alterações:

Centralizar a ul no header: No CSS do header, adicione as propriedades display: flex, justify-content: center e align-items: center para centralizar o conteúdo horizontal e verticalmente.
Ajustar o layout do header, main e footer: Para que eles fiquem juntos sem espaços, você pode remover as margens padrões que o navegador aplica. No seu caso, parece que você já ajustou as margens do main e footer. Certifique-se de que o body também não tenha margens ou paddings extras.

Aqui está como você pode ajustar seu CSS:

/* Reset básico para remover margens e paddings padrões */
body, h1, h2, ul, li {
    margin: 0;
    padding: 0;
}

header {
    background-color: #613DCA;
    padding: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

header ul {
    display: flex;
    list-style: none;
    gap: 25px;
    padding: 0;
    margin: 0;
    text-align: center;
}

main {
    background-color: #E7516C;
    color: white;
    text-align: center; /* Centraliza o texto do main */
}

footer {
    background-color: #613DCA;
    color: white;
    text-align: center; /* Centraliza o conteúdo do footer */
}

Essas alterações devem ajudar a alcançar o layout desejado, aproximando-se do exemplo que você deseja imitar. Lembre-se de ajustar as propriedades de padding ou margin conforme necessário para melhorar o espaçamento visual entre os elementos.

Espero ter ajudado e bons estudos!