Four Card Feature Section

Hello

Ideally this should be a css grid solution. Using flexbox is OK but not the best choice for this when css grid is what it was designed for...

Whatever layout method you use, you need to change some html on this

• follow advice given above - heading order matters and articles aren't a great fit for this
• header element should really sit outside of main
• figure element should only be used if an image (or other content) requires a visible caption
• fix errors in your report.

The card width problem could be caused by align-items being set to center (but I can't check in browser right now as am on mobile)

In future challenges try to start building styles from mobile first instead. It will cause fewer issues, follow best practices and leave you with shorter simpler css.

I also recommend you get really intentional about units. There's an unusual mixture in this of px em and rem (and %). Use rem for all font sizes, media queries and sometimes other things like widths, and only use em when you need something to scale based on the font size of that element or a parent (eg icons or pseudo elements or button padding can all be a good use case for em)

Good luck

More feedback:

• In my opinion, you don't need to wrap a single article in a div.
• Use heading tags in chronological order, you need to use h2 first before using h3. Don't use heading tag only for the size.
• When you're writing HTML try to imagine it when it has no styling. Do you think article is a good semantic tag in this case? I think it would be better to use ul and li. That way you don't need heading tag, just use strong tag.
• The img tag always need alt attribute. You can just leave the alt="" attribute with empty value.
• Always use width and height attribute on images, it will prevent the shifting layout happening. Don't worry about the styling, you can still control the size on external CSS. You can check this article from Web Dev about Optimize Cumulative Layout Shift.

That's it! Hopefully this is helpful!

As I am checking this on mobile view. I will sure check this on desktop view and give you a solution on tomorrow