title: Negative Margin-Top Not Working in Chrome
body: <p>I have a transparent <code>nav</code> using <code>Bootstrap</code> with an image that has a <code>margin-top: -100px</code> CSS value so it shows under the navbar.  It renders properly in IE:
  <a href="https://i.stack.imgur.com/ECtTL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ECtTL.jpg" alt="enter image description here"></a></p>
  
  <p>But for some reason the image isn't recognizing the negative <code>margin-top</code> in Chrome:
  <a href="https://i.stack.imgur.com/kyVRs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kyVRs.jpg" alt="enter image description here"></a></p>
  
  <p>My HTML is slightly complicated, but needs to be that way (for a variety of reasons):</p>
  
  <pre><code>&lt;div class="hero-image-row"&gt;
    &lt;div class="hero-image-outer text-center"&gt;
      &lt;div class="hero-image-inner text-center"&gt;
        &lt;%= image_tag 'Background 1.jpg', class: "hero-image",alt: "Delicious-looking hot dogs on a manly grill. Just like God intended." %&gt;
      &lt;/div&gt; &lt;!-- hero-image-inner --&gt;
    &lt;/div&gt; &lt;!-- hero-image-inner --&gt;
  &lt;/div&gt; &lt;!-- row --&gt;
  </code></pre>
  
  <p>And my CSS is as follows:</p>
  
  <pre><code>/* NAVIGATION */
  
   #custom-bootstrap-menu.navbar {
     margin-bottom: 0px !important;
   }
  
   #custom-bootstrap-menu.navbar-default .navbar-brand {
      color: black;
  }
  
  #custom-bootstrap-menu.navbar-default {
      font-size: 18px;
      font-family: $font-typewriter;
      background-color: $transparent-white !important;
      border: none;
      border-radius: 0px;
  }
  
  #custom-bootstrap-menu.navbar-default .navbar-nav&gt;li&gt;a {
      color: black;
  }
  
  #custom-bootstrap-menu.navbar-default .navbar-nav&gt;li&gt;a:hover,
  #custom-bootstrap-menu.navbar-default .navbar-nav&gt;li&gt;a:focus {
      color: black;
      background-color: $transparent-black !important;
  }
  
  #custom-bootstrap-menu.navbar-default .navbar-toggle {
      border-color: black;
  }
  
  #custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
  #custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
      background-color: $transparent-black;
  }
  
  #custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
  #custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
      background-color: $transparent-black;
  }
  
  #custom-bootstrap-menu.navbar-default .navbar-toggle {
    border-color: black !important;
  }
  
  #custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
    background: black !important; 
  }
  
  
  /* HEROS */
  
  .hero-image-row {
     margin-top: -50px !important;
     overflow-x: hidden !important;
     width: 100% !important;
   }
  
  .hero-image-outer {
     width: 300%;
     height: 400px;
     overflow-y: hidden !important;
   }
  
   .hero-image-inner {
     width: 66%;
     overflow-x: hidden !important;
   }
  
   .hero-image {
     height: 400px;
     margin-left: -50%;
     z-index: 0 !important;
   }
  
   @media screen and (min-width: 700px) {
     .hero-image-outer {
       width: 100%;
     }
  
     .hero-image-inner {
       width: 100%;
       height: 400px;
     }
  
     .hero-image {
       width: 100%;
       height: auto;
       margin-left: 0%;
     }
   }
  
   .overlap-hero-image {
     margin-top: -300px;
     height: 300px;
   }
  
   .height-auto {
     height: auto !important;
   }
  </code></pre>
  
  <p>Can anyone help me diagnose why Chrome is acting up here?  I have used similar code on other sites and have never had an issue.  I have tried it with and without the SCSS variables for transparency, so I know that's not the issue. It really is something with the margin.</p>
  
  <p><strong>ADDED NAVBAR CODE:</strong></p>
  
  <pre><code>&lt;div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;&lt;a class="navbar-brand" href="/"&gt;The Manly Art of BBQ&lt;/a&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"&gt;&lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-collapse navbar-menubuilder"&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="/products"&gt;Man Rules&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/about-us"&gt;BBQ&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/contact"&gt;My Mancard&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt; &lt;!-- collapse --&gt;
    &lt;/div&gt; &lt;!-- container-fluid --&gt;
  &lt;/div&gt; &lt;!-- custom-bootstrap-menu --&gt;
  </code></pre>