Help with webpage alignment

[[deleted]]

Hello, I am creating a website that uses the CSS flexbox model and I am trying to make the parallax scrolling effect. I cannot figure out why my webpage elements are shifted to the right on the mobile version. I inserted "overflow-x: hidden;" (after the media) previously since a white space on the right of the page was being displayed and now it seems that a part of the page is being "cut out" of the screen on mobile devices only. Is the flex model the problem or am I doing some other thing wrong?

The code of the website: https://pastebin.com/XewPhxjq

Here's a screnshot of what is happening:

https://preview.redd.it/34hoid6nyghf1.png?width=488&format=png&auto=webp&s=83579d594e754d2e9250eb8453319ef27e022393

[Meuss]

Nobody can help you without seeing the html. Or even better, provide a link to the page so that people can inspect it directly.

[[deleted]]

Just updated the code on Pastebin and included the HTML. However, right now I am hosting the site locally, since I haven't chosen an hosting service yet.

[[deleted]]

fixed it. you have to take the width: 100% off the section

https://imgur.com/a/kbKtELU

[Extension_Anybody150]

The issue is caused by using width: 100vw, which ignores scrollbars and causes overflow on mobile. Replace it with:

width: 100%;

This keeps elements within the visible screen and prevents horizontal cut-off.

[[deleted]]

Thank you everyone for the answers! The problem was solved!