responsive product preview page

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

There is no need to give .container a width value. To center .card on the page using flexbox or grid, 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 .card on the page using flexbox:
.container{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

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

For a responsive content, replace the width in .card with max-width.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Good job on completing the challenge!

Please make sure to include font-family in your CSS as well as using the right margin for all elements. A little reminder for the next time: Make a responsive Design with media queries or responsive layouts. :))

HAPPY CODING!!