I wrote this part of the code a while ago and after working on other pages I came back and noticed this strange behavior.

I tried changing the css to force the component footer and main component to fill the width but it didn't work, also tried wrapping them in a div and the problem persists

Please check the screenshot showing the problem:

Question response

You can see the code here, but the problem is not reproduced 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 {
}