Profile card solution

Hey!

By default, the grid column that contains the card is of size auto. That means it won't shrink below the width of the card's minimum size. The image container inside the card has a width: 21rem, and so the column will never shrink below that. You probably want the image to grow/shrink with the size of the card, so remove the width: 21rem from .cardTop.

Two approaches for centering the card in a grid layout:

/* Define the size of the column and center that column */
body {
  display: grid;
  grid-template-columns: minmax(auto, 33rem);
  place-content: center;
}

or

/* Define the size of the item inside the column and center that item */
body {
  display: grid;
  place-items: center;
}

.container {
  max-width: 33rem;
  width: 100%;
}