Pure HTML css Four card feature section solution

Root and default font-size

Instead of setting the font-size to 15px (as mentionned in the style guide). I used 16px*0.9375 = 15px.

:root {
    font-size: 0.9375rem;
}

I use a value relative to rem that equals to fifteen if the default font size is 16px instead of 15px directly. I do this to take into account the default font size set by the user agent. It is 16px by default but user may override that value in browser settings.

It allows to take into account the wish of a user to have smaller/bigger text

Not setting font-size on all header elements

I set the font size for h3 but use default UA style for h1 h2. It works where I tested it but it could be a problem : a user agent could have values that make h2 bigger than h1 or h2 for example. A safer thing would be to define it explicitely for h1 and h2

h3 {
    font-size: 1.3em;
}

max-width on content instead of fluidly increasing the margin

In the last challenge I did. I used a system where the margin slowly increase as the viewport widens.

This time I just set a fixed margin. There is a maximum width for the content. It is only when that max width is reached that the margin increase.

It is simpler at the cost of being slightly ugly when the viewport is wide but not wide enough to have reached the max width of the content.