Blog preview card

Addressing what you said here: "More than help I'd like an explanation as to why whenever I switch to the responsive view the image from the card would have a sort of "margin-top" even though I did not use this attribute"

So I was just checking out the live version of your site. I wasn't sure what you were talking about, because for my view, the image was actually cut off at the top instead of there being extra space. But then that clued me in to what the issue might be.

Go back to responsive view and change the height. You'll see that depending on the height of your browser, the card can either look like the image is going beyond the boundaries of the card, or there's space between the card and the top. This is because you have a % height (60%) instead of a fixed height (such as with px). Change it to be of fixed height to fix the issue, and just make the width dynamic to fit different screen sizes.

your work looks great but could use some changes, first the svg img in the design has rounded corners which is not the case in your work. the container is larger in width and shorter in height and the font-size is a bit smaller than it should be and finally you should work more on margin and padding. Hope I helped you, keep the good work.