simpleProject with flexbox

Hey Skalex,

There might be a better way to solve this part of your code

body {
    background-color: hsl(212, 45%, 89%);    
}
section {
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

First by giving the section a height of 90vh it means that at all screen sizes like it covers almost 90% of the screen's height. It will also bring a scroll bar automatically. To fix this you can put a min-height: 100vh to your body and remove the 90vh in the section.

Second, since you've managed to center the items; which I'll also give you more options to center items as well; instead of giving the section a specific height, what would be better would to bring it to the center and just use padding of its inside content thus giving it a height.

You might try using

margin: 0 auto; // also margin-inline: auto;

To bring the section to the center and then give it a

margin-top: 20vh; // you can play around with this number to center it properly. 

or

transform: translateY(-50%)

You can also try grid: you can check out this extensive detail.

I hope this helps and bravo on finishing the project.