Pure css and html done with atom text writer.

To get rid of accessibility issues as well, I would wrap the entire content starting from div class="header" in a main tag like you did for your footer

For linking images, I would keep the files in the image folder that frontendmentor provides you. There's no need to extract it all in one place like you did in your github.

In your Index.html I would then link images like so: <img src="images/icon-supervisor.svg">

I believe having margin: 2rem on .card is one of the factors of your "phantom space"

I also applied:

.middle {
    ...
    ...
    display: flex;
    flex-direction: column;
    align-items: center;
}

which seems to perfectly space out your cards.

I also recommend setting max-width with set values such as rem to keep your card sizing more consistent, and scaling it down as your screen gets smaller/bigger.

Using % for the width on .card and .middle shrinks the width too much when scaling down.

I hope this helps!