Why can't I scroll left on my webpage that I've wrote with HTML & CSS when I decrease the width of viewport?

Question

I've done a project from frontendmentor.io (stats-preview-card-component) with HTML & CSS. Everything work well but when I decrease the width of viewport in developer tools or when I zoom in, the left side of the main component goes further from the left edge of viewport & I can't scroll left. How can I fix this problem? I had this problem vertically, but I figured out that I must use 'body {min-height: 100vh}' for styling. Webpage after resizing viewport

body {
    font-family: 'Inter', 'Lexend Deca', sans-serif;
    font-size: 0.9375rem;
    color: hsl(0, 0%, 100%);
    background: var(--very-dark-blue);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.card {
    position: relative;
    background-color: var(--dark-desaturated-blue);
    display: grid;
    grid-template-rows: repeat(2, 9.3rem) 9.275rem;
    grid-template-columns: minmax(9rem, 10rem) minmax(9rem, 12.5rem) minmax(9rem, 11.25rem) 33.75rem;
    grid-template-areas:
        "header header header image"
        "text text text image"
        "number1 number2 number3 image";
}

<main>

    <div class="card">
      <img src="images/image-header-desktop.jpg" alt="header">
      <div class="imgcolor"></div>
      <h1>Get <strong>insights</strong> that help your business grow.</h1>

      <p class="text">Discover the benefits of data analytics and make better decisions regarding revenue, customer 
      experience, and overall efficiency.</p>
    
      <p id="companies"><em>10k+</em><br>companies</p>
      <p id="templates"><em>314</em><br>templates</p>
      <p id="queries"><em>12m+</em><br>queries</p>
    </div>

</main>