how come my scroll watcher's width is set to 100% but doesn't fill 100% of the DOM?

No description
No description
10 Replies
Jochem
Jochem2mo ago
width: 100%; is 100% of the parent, not 100% of the page
griff
griff2mo ago
so putting width: 100vw; wouldn't work either?
Jochem
Jochem2mo ago
100vw would potentially cause overflow there's no simple answer without you sharing code
griff
griff2mo ago
one sec throwing together a codepen
Jochem
Jochem2mo ago
it might be a bit before I can respond, so if anyone else wants to hop in? I'll check back later tonight otherwise
griff
griff2mo ago
no rush
Chris Bolson
Chris Bolson2mo ago
This happens because you haven't defined a left position so its left position is whatever it would be its natural position. As your haven't defined the margin on the "body", it is defaulting to whatever the browser default left margin is (8px on Firefox). So, to resolve this, either set left: 0; on the watcher or set margin: 0; on the body.
griff
griff2mo ago
huge thanks!
Ragnar
Ragnar2mo ago
Go with text properties like align text padding top margin top to center if width is the problem than set width to html or the body: 100%