Responsive Product Preview Card

Hi @bbuglz81,

Congratulations on completing the challenge!

Here is a quick suggestion for centering your card:

First, give your body a minimum height so that your page takes up the entire viewport and display it using flexbox:

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

Next, you can center the card by simply adding a margin of auto all around main:

main {
  margin: auto;
}

Hope this is helpful for you.

Happy Coding!

Hi @bbuglz81, 1- One way to center your card vertically is to throw min-height 100vh on body selector then display grid, place-content center and that's it. 2- In addition to normalize.css, a simple css reset would make working with content much easier: *{box-sizing:border-box; margin:0; padding:0;}, this reset will make sure the content width includes will inculde the padding in the total width calculated by the browser, so you don't have to calculate the content width + padding, and this will reset all the padding and margins to 0.