Strange body padding (VueJS + Nuxt, CSS)

I have little VueJS + NuxtJS and it has background gif. For now it looks like this:

body {
  margin: 0 auto;
  background: url("assets/video/background-darked.gif") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  @media only screen and (max-width: 860px) {
    overflow-y: scroll;
  }
}

As you can I have it on the whole body, but I don’t really need it, this background gif should be only on a few pages, so, if change body to classname (let’s say main) and use this class like that:

<template>
  <div class='main'>
    <Header />
  </div>
</template>

I will have that strange paddings:

enter image description here

How may I fix this?