Product-preview-card-component

Replace <p class="name"> with <h1> to fix the accessibility issue.

To center .product on the page using flexbox or grid instead of margin, 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 .product on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

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

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

add to your main class this:

  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

for center component hotizontal and verticall

Cool design! 🎉 Here are some pointers for improvement:

make use of flexbox to justify and align the the card to the centre of the page, as it currently seems off . You can do something like this:

* and put the contents there,  
*then use flexbox on main */

main{
  display: flex;
  justify-content: center;
  align-items: center; 
}

Doing it this way can also help you to create a correct size for the page too like this:

html,
body{
  height: 100%;
}

main{
  min-height: 100%;
}