Help to make flexbox container responsive

Question

Hello everyone!
So, i'm helping a friend to make her website. It's like a resume website to postulate in a audiovisual school, so there's a lot of videos and images to showcase.
I use flexbox containers and items and try to make them responsive, and face a little problem.
I have a ul.container that contains li.item (items already responsive, no pb with that) and by giving the ul.container a % height, the last item container went to be bond with the header under it.
So i gave the ul.container a margin-bottom of 20 px, but that margin is completely white,
how to make it of the background color i choosed for the ul.container?
(i tried to give the items a margin-bottom, but the last item is still bonded to the header, so i guess it has to be changed in the ul)
Here is the code:
https://code.sololearn.com/W59HNXUK3GxJ/#html
It look really messy compared to what i got in visual studio though
Better look at it in 40% zoom to don't have everything packed together

Answer 1

//hey Nathan Traub can you attach source code please so community can help you

Answer 2

I found a solution :
the margins were of the body color, so i deleted the margin-bottom attribute and give li {position : relative; bottom : +10px;}