product-preview-card

Hello MTALAFA,

Great work keeping up the momentum and submitting another challenge solution !

I've just taken a quick look I think one of the main issues here is that the body doesn't have a height, so the total body height is only the height of the .container if you have a look in your dev tools and highlight the body element in the DOM / Elements you'll understand.

Here's is a way that you could achieve what you are trying to:

body {
    background-color: hsl(30, 38%, 92%);
    font-family: "Montserrat", sans-serif;
    
    /* ADDED THE BELOW PROPERTIES */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center; 
}
  
  .container {
    display: flex;
    
    /* REMOVED THE BELOW PROPERTIES */
    /* margin-top: 12rem; */
    /* justify-content: center; */
  }

Hopefully this suggestion will help you enough to get unstuck with the centering of the main container, even if this isn't the solution that you decide on implementing.