3 column grid card

Hi, Arun! 👋

I am guessing that the "expected" thing that you mean is the attribution should be below the cards.

Next time, you should explain the expected thing. This way, people know exactly what you are trying to accomplish. 🙂

So, to achieve that you need to remove some of the code.

.container {
  /* width: 920px; */
  Note: set max-width instead
  /* height: 500px; */
  Note: let the content controls the height of it
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-self: center;
  align-self: center;
  border-radius: 15px;
  overflow: hidden;
}

@media (max-width: 600px) {
  body {
    /* flex-direction: row; */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
}

Another suggestion is to not repeat the same styling inside the media query.

body {
  background-color: var(--Very-light-gray);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

@media (max-width: 600px) {
  body {
    flex-direction: row;
    /* justify-content: center; */
    /* align-items: center; */
    /* min-height: 100vh; */
  }

All the codes that I commented on above are code that already exists outside the media query. So, there is no need to repeat those lines of code.

Also, never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting.

I hope you find this useful.