Responsiveness is off

I am trying to make my website responsive.

I have a Hero image and on top some text and a button. They all appear fine on my laptop but on my iPhone (6) the top margin is off. I can see the text and the button but they do not stay on top of the picture as they are supposed to.

I use media queries for small devices:

#bg-header{
 margin-left: 0px;
 margin-right: 0px;
  h2{
    margin-top: -20px;
    //-margin-bottom: -40px;
    font-size: 20px;
  }
  a{
    margin-top: 0px;
   }
 }

This is my jade text:

block content_header
  div.container-fluid.col-xs-12.bg-header
    div.tagline
      h2.top
        | <b> Header Text </b>
      h2.bottom
       | Secondary text.
      center
       if !user
          a.signup-button-home.btn.btn-primary.opacity(href='/request/signup') Order
        else
          a.signup-button-home.btn.btn-primary.opacity(href='/request') Order

Do you have an idea why the text and the button are displaying lower than the div they are in on mobile? I already set the margin-top to 0 for mobile.

Thanks!