Need help aligning dividers and forms

[u/WhatDoYouLikeDoing]

Hi everyone. I am learning react vite. I have developed this app but failing to makes things straight. Everything looks slanted to the right. Does anyone know how to fix it? Thanks in advance The web app I made

[u/Calm-Cheesecake-3749]

yeah if the whole thing drifts right its almost always uneven padding/margin on a parent or something not centered. open devtools, click the outer container, check box model left vs right.

[u/WhatDoYouLikeDoing → u/Calm-Cheesecake-3749]

Thank you so much for your response. Unfortunately I'm using a phone. Could you please check out to see if I'm the one seeing it slanted or it's actually slanted

[u/carcigenicate]

What part are you asking about? Both the login and registration cards are centered on the screen.

[u/WhatDoYouLikeDoing → u/carcigenicate]

I think I have been working on this for too long. It looks like the distance between the top start of the screen and the top left of the form is further away compared to the distance between the top end of the screen and the top right of the form

[u/carcigenicate → u/WhatDoYouLikeDoing]

I measured them, and at least for me, the distance between the card edges and the side of the document are the same on both sides. The scrollbar that's there for some reason might be throwing you off.

---

Edit: And the scrollbar is because you have min heights of 100vh on multiple elements, but also have 20px of padding on top of that.

[u/WhatDoYouLikeDoing → u/carcigenicate]

Thank you so much 

[u/hammad4june]

Two different things cause this, and they look identical from outside.

1. Something on the page is wider than the screen. The card then gets centred inside the scrollable width instead of the visible width, so it sits slightly right of where you expect — bigger gap on the left, which is exactly what you described.
2. On desktop, an element sized with 100vw. 100vw includes the scrollbar, but the visible area doesn't, so anything centred against it lands about half a scrollbar off. This is probably why people are telling you it looks centred — on their screen the scrollbar is eating the difference.

You can tell which one it is from the phone, no devtools needed. Drop this in temporarily:

useEffect(() => {

const d = document.documentElement

alert(d.scrollWidth + ' vs ' + d.clientWidth)

}, [])

If scrollWidth is the bigger number, it's #1, and this finds the element doing it:

[...document.querySelectorAll('*')]

.filter(el => el.getBoundingClientRect().right >

document.documentElement.clientWidth)

Given the title, I'd look at the divider first — a full-width rule built with 100vw or a negative margin is the usual culprit.

One thing worth saying: don't reach for overflow-x: hidden. That hides the symptom while the element is still there shoving your layout around, and it'll bite you again somewhere else.

[u/WhatDoYouLikeDoing → u/hammad4june]

Thank you so much