Kevin Powell - Community•14mo ago

White space to the right of my html element

I have random white space to the right of my html element. I know it's showing the body bc of it's background-color. It's solved by using overflow-x: hidden on #root, but doing that prevents a sticky nav - which I need.

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]",

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]",

1 Reply

michael•14mo ago

Also, this is only happening when the page width gets below ~1000px Fixed! I had a gradient that was overflowing that i couldn't see

Gaming

Programming

White space to the right of my html element