Columns in preview card are not aligned horizontally using HTML/CSS

* {
  --bright-orange: hsl(31, 77%, 52%);
  --dark-cyan: hsl(184, 100%, 22%);
  --very-dark-cyan: hsl(179, 100%, 13%);
  --transparent-white: hsla(0, 0%, 100%, 0.75);
  --very-light-gray: hsl(0, 0%, 95%);
}

body {
  font-size: 15px;
  font-weight: 400;
  background-color: var(--very-light-gray);
  font-family: 'Lexend Deca', sans serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  font-size: 15px;
}

h1 {
  text-transform: uppercase;
  font-weight: 400;
  font-family: 'Big Shoulders Display', cursive;
  color: var(--very-light-gray);
}

#car-container {
  max-width: 960px;
  width: 550px;
  height: 40px;
  margin: 0 auto;
  display: grid;
  padding: 20px;
}

.wrapper {
  display: grid;
  min-height: 12vh;
  border-radius: 12px;
  margin: 2rem;
  display: inline-block;
}

.cars {
  float: left;
  width: 33.33%;
  height: 340px;
  color: var(--transparent-white);
  padding: 40px;
}

@media (max-width: 992px) {
  #car-options {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    max-width: 900;
  }
}

#sedans {
  background-color: var(--bright-orange);
  border-radius: 8px 0 0 4px;
}

#suvs {
  background-color: var(--dark-cyan);
}

#luxury {
  background-color: var(--very-dark-cyan);
  border-radius: 0 8px 8px 0;
}

#sedan-btn {
  background-color: var(--very-light-gray);
  color: var(--bright-orange);
  border-radius: 30px;
  border: none;
  padding: 9px 10px 9px 10px;
}

button {
  cursor: pointer;
}

#suv-btn {
  background-color: var(--very-light-gray);
  color: var(--dark-cyan);
  border-radius: 30px;
  border: none;
  padding: 9px 10px 9px 10px;
}

#luxury-btn {
  background-color: var(--very-light-gray);
  color: var(--very-dark-cyan);
  border-radius: 30px;
  border: none;
  padding: 9px 10px 9px 10px;
}

<section class="car-container">
  <div class="wrapper">
    <div class="cars" id="sedans">
      <img src="images/icon-sedans.svg" alt="sedan icon">
      <h1>Sedans</h1>
      <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
      <button id="sedan-btn">Learn More</button>
    </div>
    <div class="cars" id="suvs">
      <img src="images/icon-suvs.svg" alt="SUV icon">
      <h1>SUVs</h1>
      <p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.
        <button id="suv-btn">Learn more</button></p>
    </div>
    <div class="cars" id="luxury">
      <img src="images/icon-luxury.svg" alt="luxury car icon">
      <h1>Luxury</h1>
      <p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.
        <button id="luxury-btn">Learn more</button></p>
    </div>
  </div>
</section>
<footer class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="http://www.iamkianna.com" target="_blank">Kianna Hendricks</a>.
</footer>

/* all CSS custom properties defined here: */
:root {
  --bright-orange: hsl(31, 77%, 52%);
  --dark-cyan: hsl(184, 100%, 22%);
  --very-dark-cyan: hsl(179, 100%, 13%);
  --transparent-white: hsla(0, 0%, 100%, 0.75);
  --very-light-gray: hsl(0, 0%, 95%);
}

/* simple CSS reset: */
*, ::before, ::after {
  box-sizing: border-box;
  /* defining the font you specified, using the font shorthand
     notation: font-weight (400), font-size (15px), line-height
     (omitted in your code, but set to 1.5), and font-family
     (Lexend Deca or sans-serif): */
  font: 400 15px / 1.5 'Lexend Deca', sans-serif;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--very-light-gray);
  min-height: 100vh;
  display: flex;
  /* to ensure a vertical layout: */
  flex-direction: column;
  align-items: center;
  /* to spread the content across the
     flex-axis (the vertical), first element
     at the top of the page, the last element
     at the foot, and any other siblings spread
     across that axis with even spacing between: */
  justify-content: space-between;
}

h1 {
  text-transform: uppercase;
  font-family: 'Big Shoulders Display', cursive;
  color: var(--very-light-gray);
}

/* I don't know why this is display: grid,
   but I didn't change it from your posted
   code; so change as you like: */
#car-container {
  width: minmax(550px, 960px);
  margin: 0 auto;
  display: grid;
  padding: 20px;
}

.wrapper {
  display: flex;
  /* allowing child flex-items to wrap to
     new lines if necessary: */
  flex-wrap: wrap;
  /* rather than using margins between the
     child elements we use the gap property
     to define a 1em space between adjacent
     rows and cells: */
  gap: 1em;
  justify-content: space-between;
  min-height: 12vh;
  /* defining the border-radius on the parent
     in order that the radius looks consistent
     regardless of layout changes due to screen/
     device width: */
  border-radius: 12px;
  margin: 2rem;
  /* in order that the content is clipped to the
     rounded corners: */
  overflow: hidden;
}

/* all shared properties moved into the rule-set
   of the shared class-name of all children: */
.cars {
  color: var(--transparent-white);
  padding: 40px;
  /* to allow the child elements to grow to occupy
     space as needed, to avoid large gaps being
     created: */
  flex-grow: 1;
  /* 100% of the width divided by the three child
     elements, with 2em subtracted to reflect the
     two 1em gaps between the contents: */
  flex-basis: calc((100% / 3) - 2em);
}

#sedans {
  background-color: var(--bright-orange);
}

#suvs {
  background-color: var(--dark-cyan);
}

#luxury {
  background-color: var(--very-dark-cyan);
}

/* again, all shared properties brought into
   the shared rule-set, in order to reduce
   repetition: */
button {
  background-color: var(--very-light-gray);
  cursor: pointer;
  border-radius: 30px;
  border: none;
  padding: 9px 10px 9px 10px;
}

#sedan-btn {
  color: var(--bright-orange);
}

#suv-btn {
  color: var(--dark-cyan);
}

#luxury-btn {
  color: var(--very-dark-cyan);
}

<section class="car-container">
  <div class="wrapper">
    <div class="cars" id="sedans">
      <img src="images/icon-sedans.svg" alt="sedan icon">
      <h1>Sedans</h1>
      <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
      <button id="sedan-btn">Learn More</button>
    </div>
    <div class="cars" id="suvs">
      <img src="images/icon-suvs.svg" alt="SUV icon">
      <h1>SUVs</h1>
      <p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.
        <button id="suv-btn">Learn more</button></p>
    </div>
    <div class="cars" id="luxury">
      <img src="images/icon-luxury.svg" alt="luxury car icon">
      <h1>Luxury</h1>
      <p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.
        <button id="luxury-btn">Learn more</button></p>
    </div>
  </div>
</section>
<footer class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="http://www.iamkianna.com" target="_blank">Kianna Hendricks</a>.
</footer>