3-Column-preview-card-component

Hey Raymond 👋

Nice work on this project 👏

The whitespace between the containers, can be resolved using flexbox, you should try this out and see.

.container {
  position: relative;
  width: 100%;
  background-color: hsl(0, 0%, 95%);
}

.card{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
 }

@media screen and (max-width: 40rem) {
  .card {
    flex-direction: column;
    height: initial;
    padding: 5rem 0;
}

I decided to remove the transform property because flexbox already align the card for us vertically(as long as the height is 100vh) and horizontally, and also remove the whitespace between them.

And It's also best to remove the default padding and margin using the universal selector in your css. And also instead of using px it's best to use Rem for font-size, it's a must for accessibility.

* {
  margin: 0;
  padding: 0;
}

Well that's all, nice work again! i hope you find this useful.

Awesome, thanks for the great feedback! I will try to look more into flexbox coming days!

Awesome!! this worked:) thankyou very much! and Im also grateful for the recommendations of learning "Flexbox" and "CSS GRID"!

Hi!

The gaps between your items is a result of a whitespace in your code - namely a line break (enter button) between divs. To get rid of it, simply remove line breaks between closing and opening tags of your <div> items. See below:

Change this: </div> <div class="suvs">

  </div>
  <div class="luxury">

To this: </div><div class="suvs">

  </div><div class="luxury">

Learning "Flexbox", and later "CSS GRID" would make creating layout for the website a lot easier. I would recommend it as a next step in your learning journey :)