Flexbox Gap is not positioning well

Hello, I’m writing a code for a landing page and the structure is simply

<body>

<header> </header>
<section> </section>
<section> </section>
<section> </section>
<footer> </footer>

</body>

I set my body display as flex and give if a gap of 5rem.

My issue now is that my footer is not sitting at the end of the page there’s some space after it but of I remove the gap it’ll stay normal at the base of the page.

I don’t want to remove the gap because I don’t want to be repeating margin top for each section…I need a way out

you have not provided your css.

if you want to not to have margin that come by defaule with browser then you can give this to solve this problem

* {
  padding: 0px;
  margin: 0px;
 }

here * mean universal selector
if this code don’t solve your issue then please provide your css so we can solve

It’s not about that, it’s about the flex gap that is effecting after the last flex element

provide your css code