I'm learning React with Vite and built a small web app with login and registration forms. The dividers and form layout appear to lean or sit slightly farther to the right than they should. I'm not sure whether the problem is real or just more noticeable on my phone. What could cause this, and how can I fix the alignment?
3 Answers
There are two common causes. First, an element may be wider than the viewport, causing the card to center inside the page’s scrollable width instead of the visible screen. Second, using 100vw can introduce a small offset on desktop because that unit includes the scrollbar width. Temporarily compare document.documentElement.scrollWidth with clientWidth; if scrollWidth is larger, something is overflowing. You can then inspect elements whose right edge extends beyond the viewport. I’d check the divider first, especially if it uses 100vw or a negative margin. Avoid simply adding overflow-x:hidden, since that hides the overflow rather than fixing the element creating it.
The login and registration cards look centered at first glance. It may be that the visual spacing around the form is making the alignment feel off, especially if you’ve been looking at the same layout for a long time. Compare the exact distances from the viewport edges rather than relying only on how it appears.
That might be what’s happening, but the distance from the top-left edge of the screen to the form seems larger than the distance from the top-right edge to the form.
If the entire page seems shifted, check the padding and margins on the outer containers first. An uneven parent width or a container that isn’t properly centered can create that effect. On a desktop, browser developer tools can show whether the left and right box-model spacing are actually different.
Thanks! I’m currently checking this on a phone, so I can’t easily use developer tools. I’m still trying to figure out whether the layout is genuinely slanted or if it only looks that way to me.
That explanation makes sense. I’ll check whether the divider or another full-width element is extending beyond the screen instead of hiding the overflow.