HTML|CSS

Replace <div class="container"> with the main tag and the html must contain <h1> to make it more accessible and to fix the accessibility issues. click here for more on web-accessibility and semantic html

To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

To center .container on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

To center .container on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

There is no need to give each card a height value. Replace the height in .card with a padding value for all the sides, this will prevent the content from overflowing on smaller screens and its a responsive replacement.

For the font-family you cand find them in google-fonts. Reduce the width value of .cards.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

HI @Frankmona I can see you don't import the right way. please check below for correction

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap');

also change this: font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

to this: font-family: 'Big Shoulders Display', cursive;

i hope this help?