Negative Margin-Top Not Working in Chrome

Question

I have a transparent nav using Bootstrap with an image that has a margin-top: -100px CSS value so it shows under the navbar. It renders properly in IE:

But for some reason the image isn't recognizing the negative margin-top in Chrome:

My HTML is slightly complicated, but needs to be that way (for a variety of reasons):

<div class="hero-image-row">
  <div class="hero-image-outer text-center">
    <div class="hero-image-inner text-center">
      <%= image_tag 'Background 1.jpg', class: "hero-image",alt: "Delicious-looking hot dogs on a manly grill. Just like God intended." %>
    </div> <!-- hero-image-inner -->
  </div> <!-- hero-image-inner -->
</div> <!-- row -->

And my CSS is as follows:

/* 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>li>a {
    color: black;
}

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>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;
 }

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.

ADDED NAVBAR CODE:

<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
  <div class="container-fluid">
    <div class="navbar-header"><a class="navbar-brand" href="/">The Manly Art of BBQ</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    </div>
    <div class="collapse navbar-collapse navbar-menubuilder">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/products">Man Rules</a></li>
        <li><a href="/about-us">BBQ</a></li>
        <li><a href="/contact">My Mancard</a></li>
      </ul>
    </div> <!-- collapse -->
  </div> <!-- container-fluid -->
</div> <!-- custom-bootstrap-menu -->

Answer 1

Use webkit.

Add the following code after your current margin code.

-webkit-margin-before: -100px;

Answer 2

I ended up fixing it using this for the top navbar to remove it from the flow:

#custom-bootstrap-menu {
  position: absolute;
  width: 100%;
}