Une partie du pied de page passe à un autre composant, mais uniquement lorsque la page se charge dans React

Question

J'ai écrit cette partie du code il y a quelque temps et après avoir travaillé sur d'autres pages, je suis revenu et j'ai remarqué ce comportement étrange.

J'ai essayé de changer le CSS pour forcer le pied de page du composant et le composant principal à remplir la largeur mais cela n'a pas fonctionné, j'ai également essayé de les envelopper dans un div et le problème persiste

Veuillez vérifier la capture d'écran montrant le problème :

Question réponse

Vous pouvez voir le code ici, mais le problème n'est pas reproduit https://codesandbox.io/s/elegant-bhabha-ns7374?file=/src/main.css

home.tsx

import Footer from "../components/Footer/Footer";
import Menu from "../components/Menu/Menu";
import logoFull from "../assets/RG-Logo-verde.svg";
import "../main.css";

export default function Home() {
  return (
    <>
      <div className="box">
        <div className="row header">
          <Menu selected="home" />
        </div>

        <main className="row content flex-column">
          <div className="homeImage">
            <img src={logoFull} alt="Home Image" />
          </div>
          <div className="row content flex-column">
            <h1 className="bold large-font text-center">
              Lorem ipsum dolor
            </h1>
            <p className="mediun-size">Lorem ipsum dolor sit amet</p>
          </div>
          <div className="presentation">
            <h2 className="bold">Presentaction</h2>
            <p className="mediun-size">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Suspendisse imperdiet arcu eget blandit eleifend. Proin congue
              erat dui, quis elementum nisl tempor quis. Praesent fringilla
              massa at auctor consequat. Phasellus a fermentum nibh. Praesent
              tincidunt est justo, ac vestibulum quam feugiat imperdiet. Quisque
              facilisis arcu nec metus fermentum, nec vulputate nunc feugiat.
              Praesent placerat diam ullamcorper nisl congue, ut elementum augue
              tempor. Pellentesque id pharetra lorem, eu venenatis urna. Etiam
              quam lorem, malesuada quis volutpat vel, hendrerit vel nisi. Proin
              pretium aliquam elit.
            </p>
          </div>
        </main>

        <footer className="row footer">
          <Footer />
        </footer>
      </div>
    </>
  );
}

footer.tsx

import "./Footer.css";

export default function Footer() {
  return (
    <>
      <div className="footer-container">
        <div className="contact-footer">
          <p>Contacto: (+591) 1234567</p>
        </div>
        <div className="email-footer">
          <p>E-mail: fabiolaalba1919@gmail.com</p>
        </div>
        <div className="rights-footer">
          <p>Derechos reservados - 2023</p>
        </div>
      </div>
    </>
  );
}

footer.css

.footer-container {
  display: flex;
  flex-direction: row;
}

.email-footer {
  margin: 5px auto;
}

.contact-footer,
.rights-footer {
  margin: 5px 40px;
}

main.css

@font-face {
  font-family: AileronRegular;
  src: url("./assets/font/Aileron-Regular.otf");
}

@font-face {
  font-family: Aileronbold;
  src: url("./assets/font/Aileron-Bold.otf");
}

* {
  font-family: AileronRegular;
}
:root {
  --color-one: #70ae6e;
  --color-two: #ff9b71;
  --bg-gradiant: url("./assets/radiant-gradient1.svg");
  --bg-rose: url("./assets/rose-petals1.svg");
}

body {
  background-image: var(--bg-rose);
  background-attachment: fixed;
  background-size: cover;
}

html,
body,
#root {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
  flex: 1 1 auto;
}
.box .row.content .presentation {
  text-align: left;
  width: 60%;
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto 40px auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

footer {
  background-color: var(--color-one);
  margin-top: auto;
}

a:hover {
  color: var(--color-one);
}

.homeImage img {
  width: 500px;
  margin: 0 auto;
}

main {
  text-align: center;
}
main,
footer,
header {
  width: 100%;
  box-sizing: border-box;
}

.row {
  --bs-gutter-x: 0rem !important;
}

.mediun-font {
  font-size: x-large;
}

.large-font {
  font-size: xxx-large;
}

.bold {
  font-family: Aileronbold;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  margin: 5rem 0;
}

.centered {
  margin: 0 auto;
}

.percented {
  width: 60% !important;
}

.box2-serv {
  width: 30%;
  text-align: left;
}
.box3-serv {
  width: 60%;
  text-align: left;
}

.black-link {
  color: black;
  text-decoration: none;
}

.card-container {
  padding: 2rem;
}

.box-us {
  width: 30%;
  text-align: left;
}

.pad-bot-3 {
  padding-bottom: 3rem;
}

.cont-brand {
}

Answer 1

Cela semble être un problème avec le rendu SVG qui n'est pas entièrement rendu. Je l'ai modifié et cela fonctionne bien maintenant, même si je ne sais toujours pas comment le réparer en utilisant le SVG précédent, si vous rencontrez ce problème, changer le SVG est la voie à suivre.