blog-preview-card

Hey, nice work. A couple of things:

You are trying to

    align-items: center;
    justify-content: center;

but you don't have a flex or grid on the body. For your code this should do the trick

body {
text-align: center;
    background-color: #F6D050;
    font-family: "Figtree", sans-serif;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

All content should be contained within landmarks. Use a main element to wrap the component.

Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section.

For more info

Pixels are fixed sizes and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible.

Also instead of width, height try to use min or max-width/height

The code looks good and maintaining external css file is good. One thing I can suggest is use semantic tags such as <section> instead of <div> just for the outer part. Also, using flex box gives us more flexibility to alter the position of content.