我前段時間編寫了這個部分，在其他頁面工作之后，我回來注意到這個奇怪的行為。

我試圖改變css來強制組件頁腳和主填充寬度，但不起作用。我還試圖用divs來包裝它們，但問題仍然存在

請查看顯示問題的屏幕截圖:

發行反應

這里您可以看到代碼，但問題不會重現 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-columm">
          <div className="homeImage">
            <img src={logoFull} alt="Home Image" />
          </div>
          <div className="row content flex-columm">
            <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 {
}