Basic CSS with media queries and flexbox

@gmqrk247 I really appreciate your suggestion. It really helped me. I was also wondering why my cards' size was growing and shrinking. Could you tell me why it was happening?

@AtulKumar0001 the hover effect border added extra pixels to the button. So on hover, those extra pixels pushed out everything around just by that tiny bit. Adding a transparent border on normal state means those pixels are already there, you just can't see it because it's transparent. But you could have set it to the same color as the background. I hope I've answered your question. Keep up the learning 🙂

@gmqrk247 Thanks for answering my question😄.

@UrbanskiDev Hey Thanks for your suggestion. I get what you are trying to say, and I should replace my other div with a <section> semantic element or something else, but what should I replace my div with since my .container is not a section?

@AtulKumar0001

Let's make it together to see what I meant with my previous comment !

<section class="container">
        <div class="wrap">
          <article class="card1 cards">
            <header>
                <picture class="picture">
                  <img src="icon-sedans.svg" alt="" />
                </picture>
            
                <h1 class="heading">Sedans</h1>
            </header>
            
            <p class="para">
              Choose a sedan for its affordability and excellent fuel economy.
              Ideal for cruising in the city or on your next road trip.
            </p>
            <button class="btn btn-1">Learn More</button>
          </article>

          <article class="card2 cards">
            <header>
                <picture class="picture">
                  <img src="icon-suvs.svg" alt="" />
                </picture>
                <h1 class="heading">SUVs</h1>
            </header>
            
            <p class="para">
              Take an SUV for its spacious interior, power, and versatility.
              Perfect for your next family vacation and off-road adventures.
            </p>
            <button class="btn btn-2">Learn More</button>
          </article>

          <article class="card3 cards">
            <header>
                <picture class="picture">
                  <img src="icon-luxury.svg" alt="">
                </picture>
                <h1 class="heading">Luxury</h1>
            </header>
            <p class="para">
              Cruise in the best car brands without the bloated prices. Enjoy
              the enhanced comfort of a luxury rental and arrive in style.
            </p>
            <button class="btn btn-3">Learn More</button>
          </article>
        </div>
</section>         

What I did is one way to structure it, but there's multiple way to do it which can be good too.

It allows you to structure your page in a better way, because as I was saying in my previous comment, a div has no meaning, while these tags provide more semantic information.

One thing to keep in mind, using div is not a bad thing, but sometimes, there's a better tag to use, which has more meaning than using a div.

Don't hesitate to ask if you have new questions !

Once again, thank you for your help @UrbanskiDev. I will try to avoid using divs. I don't have any questions right now, and I don't want to waste your time with meaningless doubts. 😅.