'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.
.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:
(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.