Unable to create spacing in Personal Portfolio

[Problem-solver]

The mobile version of the webpage is fine. The problem is in the bigger screen size. I need my projects to have a space between them equal to the space vertically between them that is currently there. I’ve tried everything I know including margin, space-around(flex), space-between(flex), and space-evenly(flex) but nothing works. Please help. Thank you. Here’s the link to the codepen https://codepen.io/creativecodepenuser/pen/MWeVyOx?editors=1100

[D-Antonelli]

Hi Problem-solver,

I have checked your code and see that your contact section has been set to height: 100vh - that explains why there is no space left for other elements to position themselves vertically.

Try removing height and padding-top property, and go ahead with flex again.

[Problem-solver]

Thank you for your response. I commented out the lines that you said I should remove but it doesn’t help. The projects are already vertically how I want them. I need to horizontally give the same amount of space between that they have vertically already.

[jsdisco]

I think the easiest way is to switch to grid in larger viewports:

 .projects{
  display: grid;
  grid-template-columns:1fr 1fr;
  grid-gap:36px; 
}

[Problem-solver]

Thank you @jsdisco, your solution works perfectly!