White space to the right of my html element

index.css:


@tailwind base;
@tailwind components;
@tailwind utilities;

*, *::before, *::after {
  box-sizing: border-box;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

* {
  margin: 0;
  padding: 0;

}

#root {
  /*overflow-x: hidden; Prevent horizontal scrolling */
  margin: 0;
}


input, textarea, button, select {
  font: inherit;
}

body {
  min-height: 100vh;
  background-color: white;
  margin: 0 auto;
}

h2, h3, p {
  text-wrap: balance;
}



all containers look like this:

    contentBox: "max-w-[1240px] mx-auto",
    contentBoxBig: "max-w-[1400px] mx-auto",
    sectionBox: "mx-auto py-[64px] lg:py-[112px]",
    sectionBoxFlat: "mx-auto pt-[64px] lg:pt-[112px]",
    sectionBoxSmall: "mx-auto py-[40px]",