Blog-preview-card

So em is a unit that is used to re-size text taking into account the font size of the parent element, so ,if you have a p element inside a div, if you set the div element to have a font size of 20px and the p element to have a font size of 1em, then in the browser, the p element will have a font size of 20px, if the p element has a font-size of 2 em, then the browser will put its font-size to 40px. It scales depending of the parent.

If you have lot of elements inside of a same div and they differ in font size, but you want to keep the same ratio of font-size. You can use em on the children, but if you have multiple parent divs with childs, it may not look consistent.

The better alternative is to use rem units, which calculates its font-size using the root element, which in almost all cases is the html element.

Remember, that the font size of the root element is 16px, unless you change it.

Hello Henry

Good job.

There is currently an issue where if you go to preview site, the image overflows the border.

I have looked at your code and noticed this:

.wrapper .imgContainer { padding-block: 0 1.25rem; img{ width: 100%; border-radius: 10px; /* margin-bottom: 10px; */ } }

This has not applied to the image, therefore I would suggest adding this to your css file:

.wrapper .imgContainer img { width: 100%; border-radius: 10px; }

That will correct the problem and the image will remain within the margins.

Regards