ul centralizada e juntar o main o header e o footer

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; }

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!