Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Bug de Alinhamento

Por algum motivo, meu card está muito desalinhado. Aplicação: https://github.com/Higor-Matos/ReactCursoAlura Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!

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.