scroll magic Pin() creating gap

Question

I'm trying to have a parallax effect on my website using ScrollMagic (like this example: http://scrollmagic.io/examples/basic/section_wipes_natural.html )

my HTML code structure is like:

<main>
  <section class="header"></section>
  <section class="content">
      <section class="section1">...</section>
      <section class="section2">...</section>
      <section class="section3">...</section>
      <section class="section4">...</section>
  </section>
</main>

and javascript:

let scene = new ScrollMagic.Scene({
  triggerElement: ".header" ,
  duration: "200%",
  triggerHook: 0,
})
  .setTween(timeline)
  .setPin("main")
  .addTo(controller);

but there is a gap at the end of section3 and the image from .header is showing through. I tried using pushFollowers: false but then the gap appears between every section through my margins

it's my first time using ScrollMagic so I'm sure there is a solution I'm not aware of, will appreciate your help