Flexbox with Random Whitespace At Top : I have an issue with a flexbox not filling up all the way to my navbar, I cannot for the life of me figure it out and a negative margin does absolutely nothing

Here's a screenshot

![a busy cat](http://i.imgur.com/BL2KJtn.jpg)

Here's the code

    <div class="container" id="heroImage">
      <div class="hero">
        <div class="center-content">
          <h1>Lazris</h1>
          <h3>Revive Your Web Presence</h3>
          <a href="#" class="button">Some Action Here</a>
        </div>
      </div>
    </div>

And the CSS

    .hero {
      background-image: url("https://unsplash.it/1500?random");
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-top: -10px;
    }

    .hero > .center-content {
      width: 400px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin: auto;
    }
    .hero > .center-content h1, .center-content h3 {
      color: white;
      line-height: 1;
    }
    .hero > .center-content h1 {
      text-transform: uppercase;
      font-size: 3em;
      margin-bottom: 0;
      text-align: center;
    }
    .hero > .center-content h3 {
      margin-bottom: 40px;
      font-size: 1.5em;
      font-weight: normal;
    }

    .center-content > .button {
      text-transform: uppercase;
      color: white;
      padding: 20px;
      border: 1px solid white;
      text-decoration: none;
    }
    .center-content > .button:hover {
      background-color: rgba(255, 255, 255, 0.3);
      border-color: rgba(255, 255, 255, 0.7);
      color: #006594;
    }

Any help is appreciated

Thanks!