title: Responsiveness is off
body: <p>I am trying to make my website responsive.</p>
  
  <p>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.</p>
  
  <p>I use media queries for small devices:</p>
  
  <pre><code>@media (max-width: 767px) {
  #bg-header{
   margin-left: 0px;
   margin-right: 0px;
    h2{
      margin-top: -20px;
      //-margin-bottom: -40px;
      font-size: 20px;
    }
    a{
      margin-top: 0px;
     }
   }
  </code></pre>
  
  <p>This is my jade text:</p>
  
  <pre><code>block content_header
    div.container-fluid.col-xs-12.bg-header
      div.tagline
        h2.top
          | &lt;b&gt; Header Text &lt;/b&gt;
        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
  </code></pre>
  
  <p>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.</p>