How to remove scroll-bar gap on page?

[Phil_B]

Hello,

I am trying to get an image to align with the edge of the page - at first it works and sits flush against browser edge.

However when I start scrolling, it adds a gap between browser edge and image for the scroll bar.

Please see image of what I mean here.

Does anyone know how to fix this so it sits flush against edge of page even when scroll bar is there?

(By the way, at first it sits under scroll bar as desired, but if you scroll up and down a bit it pops it out like in image above.)

Thanks!
Phil

---

Here is my site Read-Only: Webflow - Phillip's Blank Site
(how to share your site Read-Only link)

[Siton_Systems (Ezra Siton)]

The gap is because your layout works “fine” only for specific size of image and specific range width of screens.

Example:

Solution

One way to solve this: Add text-align: right for the wrapper div.

Done

[Phil_B]

Great thank you for this!

[bracknelson]

Here are some basic points for removing scroll-bar gap on page.
To remove the inner div 's scroll bar,
you can pull it out of the outer div 's viewport by applying a negative margin to the inner div .
Then apply equal padding to the inner div so that the content stays in view.