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
michael16mo 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
Want results from more Discord servers?
Add your server