HTML & CSS Mobile responsive thing I cant solve.

[supasibs]

Live Link: https://supasibs.github.io/CodeListSupa/ Githuv repo: https://github.com/SupaSibs/CodeListSupa/blob/3-column-preview-card/styles.css
If you open the live link on a phone/small tablet, you will see something like this: ere the gap isn't supposed to be here. why is the gap here Here thegap

 

[OldMan]

Although your image doesn't show this your button is in that space. It doesn't stay in the div.
The place I started looking was with the heights. I have found in my many years that setting heights is not a good thing to do.
Have other things to do today.
Her's what I did with your media querys

  .cc1 {
    border-radius: 7px 7px 0 0; 
  }
  .cc3 {
    border-radius: 0 0 7px 7px;
  }
  .container {
    //min-height:1950px;
    min-width:95vw;
    display:grid;
    grid-template-rows:repeat(3,100%);
    grid-template-columns: 100%;
    justify-content:center;
    background-color:hsl(0, 0%, 95%);
  }
}

And put them at the end of the CSS file.

 

[OldMan]

Spent some time today looking at your code. Personally, I would have used' flex box' instead of grid.
You have a number of things [class] that don't exist. Your script src="node_modules/eruda/eruda.js"></script> is a HTML file that could be a problem.
Did some work, but you will find you have to figure out what you want at 900px.

Your HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->
    <link rel="stylesheet" href="style.css" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="images/favicon-32x32.png"
    />
    <title>Frontend Mentor | 3-column preview card component</title>
    
    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->


 
  </head>
  <body>
    <main class="container w3-card-2">

      <div class="sect color1 cc1 padding">
        <img alt="" src="images/icon-sedans.svg" class="Moveright1" />
        <h1 class="BigShoDis">sedans</h1>
        <p class="margin LexDec">
          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="roundbit but1">Learn More</button>
      </div>

<div class="sect color2 cc2 padding" style="height: 260px;">
        <img alt="" src="images/icon-suvs.svg" class="" />
        <h1 class="BigShoDis">suvs</h1>
        <p class="margin LexDec">
          Take an SUV for its spacious interior, power, and versatility. Perfect
          for your next family vacation and off-road adventures.
        </p>
        <button class="roundbit but2">Learn More</button>
      </div>

      <div class="sect color3  cc3 padding">
        <img alt="" src="images/icon-luxury.svg" class="Moveright3" />
        <h1 class="BigShoDis">luxury</h1>
        <p class="margin3 LexDec">
          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="roundbit but3">Learn More</button>
      </div>
      
      <div class="attribution">
        Challenge by
        <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
          >Frontend Mentor</a
        >. Coded by <a href="#">Your Name Here</a>.
      </div>
    </main>
 
  </body>
</html>

And I might have changed the CSS, so here:

.container {
  min-height: 95vh;
  min-width: 95vw;
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: repeat(3, 305px);
  align-items: center;
  justify-content: center;
}
.BigShoDis,
h1 {
  font-family: "Big Shoulders Display";
  text-transform: uppercase;
  color: hsl(0, 0%, 95%);
}
.containerchild {
  height: 57%;
}
.LexDec,
p {
  color: hsla(0, 0%, 100%, 0.75);
  font-family: "Lexend Deca";
}
p {
  font-size: 15px;
}
.sect {
  /*This was just for testing, sry*/
  /* border:solid #fff 4px; */
}
.color1 {
  background-color: hsl(31, 77%, 52%);
}
.color2 {
  background-color: hsl(184, 100%, 22%);
}
.color3 {
  background-color: hsl(179, 100%, 13%);
}
.roundimg {
  border-radius: 50%;
}
.cc1 {
  border-radius: 7px 0 0 7px;
}
.cc3 {
  border-radius: 0 7px 7px 0;
}
.padding {
  padding: 40px 45px 30px 45px;
  box-shadow: 2px 2px 3px grey;
}
.margin {
  margin-bottom: 70px;
}
.margin3 {
  margin-bottom: 70px;
}
.but1 {
  color: hsl(31, 77%, 52%);
  background-color: hsl(0, 0%, 95%);
  border: solid hsl(0, 0%, 95%);
}
.but1:hover {
  border: solid hsl(0, 0%, 95%);
  color: hsl(0, 0%, 95%);
  background-color: hsl(31, 77%, 52%);
}
.but2 {
  color: hsl(184, 100%, 22%);
  background-color: hsl(0, 0%, 95%);
  border: solid hsl(0, 0%, 95%);
  margin-top: 15px;
}
.but2:hover {
  border: solid hsl(0, 0%, 95%);
  color: hsl(0, 0%, 95%);
  background-color: hsl(184, 100%, 22%);
}
.but3 {
  color: hsl(178, 100%, 13%);
  background-color: hsl(0, 0%, 95%);
  border: solid hsl(0, 0%, 95%);
}
.but3:hover {
  border: solid hsl(0, 0%, 95%);
  color: hsl(0, 0%, 95%);
  background-color: hsl(179, 100%, 13%);
}
.roundbit {
  border-radius: 20px;
  width: 60%;
  height: 10%;
  font-family: "Lexend Deca";
}
@media screen and (max-width: 900px) {
  .cc1 {
    border-radius: 7px 7px 0 0;
  }
  .cc3 {
    border-radius: 0 0 7px 7px;
  }
  .container {
    //min-height:1950px;
    min-width: 95vw;
    display: grid;
    grid-template-rows: repeat(3, 100%);
    grid-template-columns: 100%;
    justify-content: center;
    background-color: hsl(0, 0%, 95%);
  }
}