Unintended large gap between lines of text?

Hello,

I’m in the very early stages of mocking up a portfolio site and have hit a problem I can’t solve. In my container which should be a list of projects titles formated as a block of text, the second line of text appears really far below the first and there is then a similar gap between the list line of project titles for the project categories which sort the projects using JS.

Can anyone help me identify what I’ve done wrong?

https://codepen.io/franceslmdavis/pen/YogaRV

It’s because of this rule:

.wrapper div {
  min-height: 400px; 
}

That makes any div inside wrapper to be at least 400px tall, and of course that includes your project divs.

Ah of course! Thank you.