Item getting cut off in HTML

HTML-CSS
1

'Tis is thy pen -->https://codepen.io/Mike-was-here123/pen/WadgVa?editors=0110

Note: Please don’t use forked pens (delete them after your done). This is a grade for school and i cant go through the mess of explaining why their is 3 copies of my project on the exact same website i made it.

Now if you go on CSS line 240 you can see my CSS for my product section that is HTML line 71. I put borders around everything so you can see.

If you go on line 543 CSS you can see the media query to style it for smaller screens.

All i do is style my nav on top of my products and put both into overflow-x scrolls. I then styled fixed heights in their.

My .products-wrapper contains all my cards/ products, and speaking of those they seem to get cut off. When on smaller screens (880px) the first product card is cut off at the start for some odd reason:

image
image1920×1040 356 KB

(just encase image is not loading --> https://postimg.cc/KRF774CY/a1378429)

I have no idea why this is happening. It also happens at the way end card on the left, which seems to also have its margin cut off.

@camperextraordinaire

2

I see what you mean. When you resize the window, Series One and Series Two disappear. They must be off to the left side for some reason…

It’s a lot of HTML and CSS and I can’t quite figure out why it’s doing that. The best solution; instead of forcing the scroll bar, if you display 1 or 2 items on a row and have multiple rows (like how it is on your full-screen site). If you really need them all to appear on one row, you could include a .product-card in your Media section and make it smaller, to try and fit more items in.

If you need it to work for Mobile, Tablets, etc, you should be using em (instead of px) so that everything scales down. (I don’t know how important this is for your lessons.) You can test how it looks using this website: https://ready.mobi/