Por algum motivo, meu card está muito desalinhado.
Aplicação: https://github.com/Higor-Matos/ReactCursoAlura
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Por algum motivo, meu card está muito desalinhado.
Aplicação: https://github.com/Higor-Matos/ReactCursoAlura
Salve, Higor!
Os estilos que você aplicou no componente <Rodape /> estão alterando as propriedades de todos os elementos que possuem a classe CSS .rodape.
Para ajustar, você pode alterar o componente <Rodape /> para o seguinte, por exemplo:
// src/componentes/Rodape/index.js
import "./Rodape.css";
const Rodape = () => {
return (
<footer className="rodape-organo">
<div className="logos">
<img src="/imagens/fb.png" alt="Facebook" />
<img src="/imagens/tw.png" alt="Twitter" />
<img src="/imagens/ig.png" alt="Instagram" />
</div>
<img src="/imagens/logo.png" alt="Organo" />
<p>Desenvolvido por Higor Matos</p>
</footer>
);
};
export default Rodape;/* src/componentes/Rodape/Rodape.css */
.rodape-organo {
align-items: center;
background-color: #6272a4;
background-image: url(/public/imagens/fundo.png);
display: flex;
justify-content: space-around;
padding: 5px 0;
width: 100%;
}
.rodape-organo .logos {
display: flex;
gap: 32px;
}
.rodape-organo p {
color: white;
}Além disso, no seu arquivo src/componentes/Colaborador/Colaborador.css, você pode remover a linha 26, para manter o texto alinhado ao centro.
A linha 26 é o seguinte:
text-align: initial;Acho que com essa alterações você vai conseguir ter o resultado que espera.