3-Column Car Preview Card using HTML and CSS Grid

Hello @newtothis90,

Congratulations on completing the challenge!

I have a recommendation for you to improve your code:

Try to avoid using absolute positioning to center your main content. What happens, is that when someone views your site on a smaller screen that person will not see all of your content. This is because absolute positioning positions your content in a fixed spot no matter what the size of the screen is.

Steps to change your code:

1. Remove the absolute positioning for the container (don't forget the media query):

.container {
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 900px)
  .container {
    transform: translate(-50%,-25%);
  }
}

2. Add an alternative method of centering your content. Two great ways of doing this are css grid and flexbox. Here is how to can do it using css grid:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

The min-height is there to tell your body to use the entire height of the page unless the content exceeds it. In that case the user can scroll to view the other content.

Well done! You have now improved the look of your page while making your code more efficient and readable. I hope this was helpful for you!