Four Card Solution

👾Hello Andres Guevara, congratulations for your new solution!

Here's some tips to improve your solution:

First of all you need to make smaller the gap between the cards, a good way to do that is giving the container a limit of how much it can grow, you can give it to the container using max-width and set the spacing using gap and use margin: 0 auto to force the alignment.

Here's the changes I give your code:

@media (min-width: 1200px)
.container {
    max-width: 1110px;
    /* width: 100vw; */
    margin: 0 auto;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    justify-items: center;
    align-items: center;
}

Then you need to remove the grey background from the container and insert it to the body to make the color fill all the screen.

👋 I hope this helps you and happy coding!

To make color lines on each card you are using pseudo elements. I will recommend to use border-top property:

 .card--green {
    border-top: 2px solid green;
}

I will suggest to not wrap <header> inside <main>.