How to achieve negative top margin of a form in a div with a background colour

Question

I would like to move a form up a certain amount of pixels, but the container it is in is also moving up.

Code is here:

.container {
  background: #fff;
  padding-top: 60px;
}

.background {
  background: #000;
}

form {
  color: red;
  margin-top: -30px;
}

<div class="container">
  <div class="background">
    <form>
      This is my form
    </form>
  </div>
</div>

Fiddle is here:

https://jsfiddle.net/c5rf3pmo/