Elements on the page get clipped when resizing viewport on smaller breakpoints

Let me explain,

  • I set up a section, inside it a div block set to flexbox and to stretch and also to align children to the right.
  • I put a grid inside with some elements, set the grid size to 50vw and it aligns to the right. Now I have a 4x4 grid occupying half the screen and aligned to right.

Now on the main breakpoint, everything is fine, when I grab the viewport handle and resize it in, the grid is pushed by the viewport border as expected.

When I switch to the tablet and lower breakpoints, the grid that is aligned to the right no longer gets pushed in when grabbing the viewport handle and resizing it, it stays put and gets clipped.

Ive been struggling with this for a while, I’m stumped. On the preview link you can catch it when you nearing the end of the breakpoint you can seen the 2nd section elements clip from the right until you reach the next breakpoint when it “jumps” to fit in the viewport.

You can see it on the screenshots attached, this is on tablet breakpoint, as I said, on the main one it gets pushed in not clipped.

Any help would be greatly appreciated. Even point me to a relevant video tutorial or article cause I have to solve this thing.


Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)