CSS Grid resizing things I don't want

In mobile view my grid items are resizing in a way that I don't want. (please look at the page resized to around 583px)

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 70px 10% 50px 10%;
  font-family: Poppins, sans-serif;
  color: #4E5060;
  background-color: #FAFAFA;
  display: grid;
  justify-content: center;
}

header {
  text-align: center;
  margin-inline: auto;
  width: 50%;
}

header h1 {
  font-weight: 200;
  margin-bottom: 20px;
}

p {
  color: #A7A6AA;
}

header p {
  margin-bottom: 50px;
}

.bold {
  font-weight: bold;
}

.main-grid {
  display: grid;
  grid-template-columns: repeat(3, 350px);
  grid-template-rows: repeat(4, .5fr);
  gap: 30px;
}

.card {
  background-color: #fff;
  padding: 25px 35px;
  height: 255px;
  box-shadow: 0 10px 10px #ddd;
  border-radius: 8px;
  min-width: 350px;
  max-width: 350px;
  margin-inline: auto;
}

.card:nth-of-type(1) {
  grid-row: 2/4;
  border-top: 5px solid hsl(180, 62%, 55%);
}

.card:nth-of-type(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  border-top: 5px solid hsl(0, 78%, 62%);
}

.card:nth-of-type(3) {
  grid-column: 2 / 3;
  grid-row: 3 / 5;
  border-top: 5px solid hsl(34, 97%, 64%);
}

.card:nth-of-type(4) {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
  border-top: 5px solid hsl(212, 86%, 64%);
}

.card h3 {
  margin-bottom: 10px;
}

.card p {
  font-size: 14px;
}

@media (min-width: 601px) and (max-width: 1200px) {
  header {
    width: 100%;
  }
  .main-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .card {
    margin-inline: initial;
  }
  .card:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
    margin-left: auto;
  }
  .card:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .card:nth-of-type(3) {
    grid-column: 1;
    grid-row: 2;
    margin-left: auto;
  }
  .card:nth-of-type(4) {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (max-width: 600px) {
  .main-grid {
    grid-template-columns: 1fr;
  }
  header {
    width: 100%;
  }
  .card {
    min-width: 350px;
    max-width: initial;
  }
  .card:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .card:nth-of-type(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .card:nth-of-type(3) {
    grid-column: 1;
    grid-row: 3;
  }
  .card:nth-of-type(4) {
    grid-column: 1;
    grid-row: 4;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
    <link rel="stylesheet" href="style.css">

    <title>Frontend Mentor | Four card feature section</title>
  </head>
  <body>
    <header>
      <h1>Reliable, efficient delivery<br><span class="bold">Powered by Technology</span>
      </h1>

      <p>Our Artificial Intelligence powered tools use millions of project data points 
      to ensure that your project is successful</p>
    </header>

    <section class="main-grid">

      <div class="card">
        <h3>Supervisor</h3>
        <p>Monitors activity to identify project roadblocks</p>
      </div>
      <div class="card">
        <h3>Team Builder</h3>
        <p>Scans our talent network to create the optimal team for your project</p>
      </div>
      <div class="card">
        <h3>Karma</h3>
        <p>Regularly evaluates our talent to ensure quality</p>
      </div>
      <div class="card">
        <h3>Calculator</h3>
        <p>Uses data from past projects to provide better delivery estimates</p>
      </div>
      
    </section>
  </body>
</html>

The second and fourth cards on the page are large like I want (and expect) while the other two are smaller. In other words it's not resizing evenly.

How can I get the behavior that I want of all 4 cards being the same width? (Grid does behave this way if you continue to shrink the viewport to 370px)

Also I have the media query set to 600px but I notice it is not changing until I resize my browser to around 450px? Does anyone know why that is?

Solution

On mobile view, your .card was affected by thismargin-inline: auto;.

I added this to to your mobile media query to fix the wrong sizing on mobile:

  .card {
    min-width: 350px;
    max-width: initial;
    margin-inline: 0;
  }

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 70px 10% 50px 10%;
  font-family: Poppins, sans-serif;
  color: #4E5060;
  background-color: #FAFAFA;
  display: grid;
  justify-content: center;
}

header {
  text-align: center;
  margin-inline: auto;
  width: 50%;
}

header h1 {
  font-weight: 200;
  margin-bottom: 20px;
}

p {
  color: #A7A6AA;
}

header p {
  margin-bottom: 50px;
}

.bold {
  font-weight: bold;
}

.main-grid {
  display: grid;
  grid-template-columns: repeat(3, 350px);
  grid-template-rows: repeat(4, .5fr);
  gap: 30px;
}

.card {
  background-color: #fff;
  padding: 25px 35px;
  height: 255px;
  box-shadow: 0 10px 10px #ddd;
  border-radius: 8px;
  min-width: 350px;
  max-width: 350px;
  margin-inline: auto;
}

.card:nth-of-type(1) {
  grid-row: 2/4;
  border-top: 5px solid hsl(180, 62%, 55%);
}

.card:nth-of-type(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  border-top: 5px solid hsl(0, 78%, 62%);
}

.card:nth-of-type(3) {
  grid-column: 2 / 3;
  grid-row: 3 / 5;
  border-top: 5px solid hsl(34, 97%, 64%);
}

.card:nth-of-type(4) {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
  border-top: 5px solid hsl(212, 86%, 64%);
}

.card h3 {
  margin-bottom: 10px;
}

.card p {
  font-size: 14px;
}

@media (min-width: 601px) and (max-width: 1200px) {
  header {
    width: 100%;
  }
  .main-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .card {
    margin-inline: initial;
  }
  .card:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
    margin-left: auto;
  }
  .card:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .card:nth-of-type(3) {
    grid-column: 1;
    grid-row: 2;
    margin-left: auto;
  }
  .card:nth-of-type(4) {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (max-width: 600px) {
  .main-grid {
    grid-template-columns: 1fr;
  }
  header {
    width: 100%;
  }
  .card {
    min-width: 350px;
    max-width: initial;
    margin-inline: 0;
  }
  
  .card:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .card:nth-of-type(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .card:nth-of-type(3) {
    grid-column: 1;
    grid-row: 3;
  }
  .card:nth-of-type(4) {
    grid-column: 1;
    grid-row: 4;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
    <link rel="stylesheet" href="style.css">

    <title>Frontend Mentor | Four card feature section</title>
  </head>
  <body>
    <header>
      <h1>Reliable, efficient delivery<br><span class="bold">Powered by Technology</span>
      </h1>

      <p>Our Artificial Intelligence powered tools use millions of project data points 
      to ensure that your project is successful</p>
    </header>

    <section class="main-grid">

      <div class="card">
        <h3>Supervisor</h3>
        <p>Monitors activity to identify project roadblocks</p>
      </div>
      <div class="card">
        <h3>Team Builder</h3>
        <p>Scans our talent network to create the optimal team for your project</p>
      </div>
      <div class="card">
        <h3>Karma</h3>
        <p>Regularly evaluates our talent to ensure quality</p>
      </div>
      <div class="card">
        <h3>Calculator</h3>
        <p>Uses data from past projects to provide better delivery estimates</p>
      </div>
      
    </section>
  </body>
</html>

Now your grid elements will be at the same size, and if you want to change the size of them you can change the margin-inline property (For example margin-inline: 5px)