Screenshot of my page

I have a form with a container inside and all is fine with that, except my form seems to have a big margin space from the top and i cant work out why. I have a load of white space from the main background to the form! My css is as below and i cant seem to work out why this is happening!

  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

/*  */
body {
background-color: var(--green-200);
font-family: 'Karla', sans-serif;
}

.form {
padding: 20px;
width: 50%;
display: grid;
justify-content: center;
place-items: center;
background-color: #fff;
transform: translate(50%, 50%);
padding-top: -50px;
}

.container {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
align-items: center;
justify-content: center;
width: 40vw;
margin: 0 auto;
}```

removing and adding margins from form, container and body!

My full page sits like the picture added.