Nav Element wants to overflow body for some reason
Working in React, I have a "Home" Component, that is a sibling to the "Navigation" component, both getting returned in App().
The "Navigation" element wants to overflow the body for some reason.
I'm not returning the <body> from any component. The entire App() return is being fed into <body> in the html, but my Navigation component is still overflowing <body> whenever I try to make it 100% wide.
GIT: https://github.com/nnall/GoWithGig-Nick.git
PAGES: https://nnall.github.io/GoWithGig-Nick/
GitHub
GitHub - nnall/GoWithGig-Nick
Contribute to nnall/GoWithGig-Nick development by creating an account on GitHub.
GoWithGig-Nick
Getting Started with Create React App
5 Replies
Your
body is 100vw width, not 100%. The body has 8px margin by default so you’re content will have a 16px overflow.
You’ll have to set margin to 0.
So anything that’s 100% width and a child of body will have that overflow as wellwhy does my <body> have a default 8px? When I'm setting universal resets in my css?
Never mind, then. Is there by default but you removed it. Not sure, then, what’s up
I’m at work so won’t be able to look at the code for a few hours. I’ll try to hit you back up when I get home
cool cool, i understand, thank you
Kevin Powell
YouTube
The problems with viewport units
Conquering Responsive Layouts (free course): https://courses.kevinpowell.co/conquering-responsive-layouts
Join the Discord: https://kevinpowell.co/discord
Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizon...