Sebahagian daripada pengaki melompat ke komponen lain, tetapi hanya apabila halaman dimuatkan dalam React

Question

Saya menulis bahagian kod ini sebentar tadi dan selepas mengerjakan halaman lain, saya kembali dan melihat tingkah laku pelik ini.

Saya cuba menukar css untuk memaksa pengaki komponen dan komponen utama mengisi lebar tetapi ia tidak berfungsi, cuba juga membungkusnya dalam div dan masalah berterusan

Sila semak tangkapan skrin yang menunjukkan masalah:

Respons soalan

Anda boleh melihat kod di sini, tetapi masalahnya tidak diterbitkan semula 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

Ini nampaknya menjadi isu dengan SVG tidak dipaparkan sepenuhnya. Saya telah mengubahnya dan ia berfungsi dengan baik sekarang, walaupun saya masih tidak tahu bagaimana untuk membetulkannya menggunakan SVG sebelumnya, jika anda mendapati diri anda menghadapi masalah ini, menukar SVG adalah cara yang perlu dilakukan.