Responsive recipe page using CSS grids and flexbox

Ok so I took a good look.

1. You say you are happy that you made the page responsive, wich it is, good job. Now it is important to understand what makes a page responsive or unresponsive.

Every html page is responsive initially wich means it's on us to not mess it up with our css. You didn't, again, good job. Now I just want you to understand why is your page responsive, because it all happens because of one little property.

Yes, it is all because of your max-width: 80% on your container. Because of this one property, the website doesn't break until reaching ridiculously thin width.

Now this is where it causes a few issue for this particular case.

1st: 80% is way too wide for desktop device. I imagine you had mobile in mind when you did this.(nothing wrong with using media queries for wider device instead of vice-versa, that's actually how I work most of the time)

2nd this leads me to another issue, you have used a media-query for device with a max-width of 375px. 2.1 this media query does absolutely nothing. Why ? Because you use it to set a max-width of 400px to your .container, now remember your container already has a max-width of 80% obviously 80% of 375px is less than 400px. 2.2 use em for media queries, they're the most consistent.(40 to 50 em is a good ballpark to start with, no need to go so low).

3rd Take your time with the CSS. I can see you wanted to go quickly. I see this on most project here. Going fast is worth nothing if you're not first focused on doing everything right. I would recommend you looking into CSS variables and at the start of every project, use the style guide and create a variable for every bit of information that is given to you. These are the little details that separate the pros from the hobbyists.

Now you are clearly going in the right direction, take your time and you will build perfect projects soon.