Footer appears half way on my filterable portfolio

Hi Everyone!

I've setted up a filterable portfolio y slight Customize as per this tutorial :
https://almostinevitable.com/divi-tutorial-centering-filterable-portfolio-buttons/ and this CSS :
.et_pb_filterable_portfolio .et_pb_portfolio_filters {
display: flex;
justify-content: center;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li {
margin: 4px 4px;
}
but I don't understand why the footer is showing in middle of my filterable portfolio page.
I have try to add CSS for the footer to be sticky and it is not working neither.
#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Please see attached the pic if it might ring the bell to anyone?

Many thanks for your help!

 

I'am afraid I can't share my URL, our website is on our dev site. I did attached a pic, it might help? or do you need the url ?

 

Many thanks, once we are live I'll copy you the URL