Nice work! Self-learning to code is a daunting task. Your HTML and CSS seem well organized and laid out. It’s easy to navigate and read. Just a few tips and tricks,
The images in your card don’t seem to be fully responsive. If I increase the width or decrease the width of the browser the images do not maintain aspect ratio. It seems you set the images to have a height of 250px and a width of 100% because the original image went beyond or below the height of the containing div. The easiest way to deal with this is to download the images and resize them to 250px. However, in a lot of cases, this is not practical.
Your document scales with the dimensions of the browser window indefinitely. For very large screens the contents get spaced such that it breaks the design.
If you wrap your content, except the header and footer, in a div and set a max-width on it, it will fix 2. To fix 1 it takes a little more planning. Instead of using an img tag you could use a div and set the img as a background image and control how the images look with the background-img property. This way the image size won’t break the dimensions of its containing card but it might cut off some of the content of the image without distorting it.
My go-to method is a combination of the above and adding more breakpoints. By removing the percent margin on the card and setting fixed values so when the browser hits the edge of the card or gets too close, I can add a breakpoint so 3 cards appear per row. then 2, then 1.