Website div not displaying properly in Firefox

Question

I'm working on a website (website here). The div classed .index_container and all of its contents aren't displaying properly in Firefox. They're there, but not visible. I've tried setting display: table;, which made the space the content should occupy visible, but the content itself still didn't display correctly. I've also tried messing around with overflow, to no avail.

Also, I've confirmed it works on Safari and Chrome on OS X, Chrome on Android, Chrome and Safari on iOS, and Internet Explorer on Windows. On Windows, however, Microsoft Edge has the same display problem as Firefox does.

    .index_header {
      overflow-x: auto;
      max-width: 100%;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-stype: -ms-autohiding-scrollbar;
      position: relative; }
      @media screen and (max-width: 39.9375em) {
        .index_header {
          background-image: url("../img/header/banner_small.jpg");
          background-size: 100% 100%;
          height: 100%;
          padding-top: 100%;
          background-attachment: scroll;
          background-position: left; } }
      @media screen and (min-width: 40em) and (max-width: 63.9375em) {
        .index_header {
          background-image: url("../img/header/banner_medium.jpg");
          background-size: 100% 100%;
          height: 100%;
          padding-top: 42.93333%;
          background-attachment: scroll;
          background-position: left; } }
      @media print, screen and (min-width: 64em) {
        .index_header {
          background-image: url("../img/header/banner_large.jpg");
          background-size: 100% 100%;
          height: 100%;
          padding-top: 34.00204%;
          background-attachment: scroll;
          background-position: left; } }
      .index_header .index_headshot {
        z-index: 2;
        border-radius: 100%; }
        @media screen and (max-width: 39.9375em) {
          .index_header .index_headshot {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%); } }
        @media print, screen and (min-width: 40em) {
          .index_header .index_headshot {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                    transform: translateY(-50%); } }
        @media screen and (min-width: 40em) and (max-width: 63.9375em) {
          .index_header .index_headshot {
            margin-left: 6.2%; } }
        @media print, screen and (min-width: 64em) {
          .index_header .index_headshot {
            margin-left: 4.89629%; } }
        .index_header .index_headshot img {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          z-index: 2; }
        @media screen and (max-width: 39.9375em) {
          .index_header .index_headshot {
            height: 78.125%;
            width: 78.125%; }
            .index_header .index_headshot img {
              height: 79.375%; } }
        @media screen and (min-width: 40em) and (max-width: 63.9375em) {
          .index_header .index_headshot {
            height: 77.63975%;
            width: 33.33333%; }
            .index_header .index_headshot img {
              height: 77.63975%; } }
        @media print, screen and (min-width: 64em) {
          .index_header .index_headshot {
            height: 77.8%;
            width: 26.45359%; }
            .index_header .index_headshot img {
              height: 77.8%; } }
      @media screen and (max-width: 39.9375em) {
        .index_header:before {
          background-color: rgba(36, 47, 49, 0.4);
          position: absolute !important;
          top: 0rem !important;
          right: 0rem !important;
          bottom: 0rem !important;
          left: 0rem !important;
          content: '';
          width: auto;
          height: 100%; } }
      @media print, screen and (min-width: 40em) {
        .index_header:before {
          background: linear-gradient(to right, rgba(36, 47, 49, 0.4) 15%, rgba(36, 47, 49, 0));
          position: absolute !important;
          top: 0rem !important;
          right: 0rem !important;
          bottom: 0rem !important;
          left: 0rem !important;
          content: '';
          width: auto;
          height: 100%; } }
      .index_header .index_header_content {
        position: relative; }
        @media screen and (max-width: 39.9375em) {
          .index_header .index_header_content {
            margin-top: -100%; } }
        @media screen and (min-width: 40em) and (max-width: 63.9375em) {
          .index_header .index_header_content {
            margin-top: -42.93333%; }
            .index_header .index_header_content h1 {
              margin-top: 5%;
              font-size: 56px;
              color: #111617;
              opacity: .7; } }
        @media print, screen and (min-width: 64em) {
          .index_header .index_header_content {
            margin-top: -34.00204%; }
            .index_header .index_header_content h1 {
              margin-top: 3%;
              font-size: 72px;
              color: #111617;
              opacity: .7; } }
        .index_header .index_header_content .index_name {
          text-align: center;
          width: 100%;
          background-color: rgba(71, 106, 105, 0.9);
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          -webkit-flex: 0 0 auto;
              -ms-flex: 0 0 auto;
                  flex: 0 0 auto;
          min-height: 0px;
          min-width: 0px;
          width: calc(100% - 1.875rem);
          margin-right: 0.9375rem;
          margin-left: 0.9375rem;
          z-index: 1; }
          .index_header .index_header_content .index_name:after {
            position: absolute !important;
            top: 0rem !important;
            right: 0rem !important;
            bottom: 0rem !important;
            left: 0rem !important;
            content: '';
            width: auto;
            height: 100%;
            background: url(../img/header/nav2.png);
            background-repeat: repeat-x;
            margin-left: -12%;
            z-index: -1;
            opacity: .3; }
          @media screen and (max-width: 39.9375em) {
            .index_header .index_header_content .index_name {
              display: none; } }
          @media screen and (min-width: 40em) and (max-width: 63.9375em) {
            .index_header .index_header_content .index_name {
              margin-top: 21.46667%;
              padding-left: 35%; } }
          @media print, screen and (min-width: 64em) {
            .index_header .index_header_content .index_name {
              margin-top: 17.00102%;
              padding-left: 20%; } }

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Josh Guberman</title>
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon/favicon-16x16.png">
    <link rel="manifest" href="assets/img/favicon/manifest.json">
    <link rel="mask-icon" href="assets/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href=".assetsimg/favicon/favicon.ico">
    <meta name="msapplication-config" content="assets/img/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

  </head>
  <body>

    <div class="top-bar" id="big">
    	<div class="top-bar-left">
    	<!--
    		<ul class="menu">
    			<li class="menu-text">Josh Guberman</li>
    		</ul>
    	-->
    	</div>
    	<div class="top-bar-right">
    		<ul class="menu">
    			<li><a href="#">About Me</a></li>
    			<li><a href="#">CV</a></li>
    			<li><a href="#">Projects</a></li>
    			<li><a href="#">Artwork</a></li>
    			<li><a href="#">Blog</a></li>
    		</ul>
    	</div>
    </div><div class="top-bar" id="small">
    	<div class="menu">
    		<div class="menu-text">Josh Guberman</div>
    	</div>
    </div>
    <div class="index_header">
    	<div class="index_headshot">
    		<img src="assets/img/header/headshot.svg" alt="headshot of Josh Guberman">
    	</div><!-- index_headshot -->
    	<div class="index_header_content">
    		<div class="index_name">
    		<h1>Josh Guberman</h1>
    		</div><!-- index_name -->
    	</div> <!-- index_header_content -->
    </div> <!-- index_header_container --><div class="about-me">
    	<div class="spacer"></div>
    	<div class="top-heading"><h2>About Me</h2></div>
    	<div class="spacer"></div>
    	<div class="about-content">
    		<p>Some words are written here</p>
    	</div>
    </div>

    <div class="footer-container">
    	<div class="footer-wrapper">
    		<div class="footer">
    			<p>&copy;Josh Guberman 2017</p>
    		</div>
    	</div>
    </div>

    <script src="assets/js/app.js"></script>
    <script>$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
  // newSize is the name of the now-current breakpoint, oldSize is the previous breakpoint
});</script>
  </body>
</html>

Answer 1

So I originally was very off. I think the problem is that firefox is default giving your header a height of 0px. Going on the console and changing it some you can see I was able to see it by making a small adjustment to your CSS for your header. Here is imgur link.

Answer 2

.index_header {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-stype: -ms-autohiding-scrollbar;
  position: relative; }
  @media screen and (max-width: 39.9375em) {
    .index_header {
      background-image: url("../img/header/banner_small.jpg");
      background-size: 100% 100%;
      height: 100%;
      padding-top: 100%;
      background-attachment: scroll;
      background-position: left; } }
  @media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .index_header {
      background-image: url("../img/header/banner_medium.jpg");
      background-size: 100% 100%;
      height: 100%;
      padding-top: 42.93333%;
      background-attachment: scroll;
      background-position: left; } }
  @media print, screen and (min-width: 64em) {
    .index_header {
      background-image: url("../img/header/banner_large.jpg");
      background-size: 100% 100%;
      height: 100%;
      padding-top: 34.00204%;
      background-attachment: scroll;
      background-position: left; } }
  .index_header .index_headshot {
    z-index: 2;
    border-radius: 100%; }
    @media screen and (max-width: 39.9375em) {
      .index_header .index_headshot {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%); } }
    @media print, screen and (min-width: 40em) {
      .index_header .index_headshot {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%); } }
    @media screen and (min-width: 40em) and (max-width: 63.9375em) {
      .index_header .index_headshot {
        margin-left: 6.2%; } }
    @media print, screen and (min-width: 64em) {
      .index_header .index_headshot {
        margin-left: 4.89629%; } }
    .index_header .index_headshot img {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      z-index: 2; }
    @media screen and (max-width: 39.9375em) {
      .index_header .index_headshot {
        height: 78.125%;
        width: 78.125%; }
        .index_header .index_headshot img {
          height: 79.375%; } }
    @media screen and (min-width: 40em) and (max-width: 63.9375em) {
      .index_header .index_headshot {
        height: 77.63975%;
        width: 33.33333%; }
        .index_header .index_headshot img {
          height: 77.63975%; } }
    @media print, screen and (min-width: 64em) {
      .index_header .index_headshot {
        height: 77.8%;
        width: 26.45359%; }
        .index_header .index_headshot img {
          height: 77.8%; } }
  @media screen and (max-width: 39.9375em) {
    .index_header:before {
      background-color: rgba(36, 47, 49, 0.4);
      position: absolute !important;
      top: 0rem !important;
      right: 0rem !important;
      bottom: 0rem !important;
      left: 0rem !important;
      content: '';
      width: auto;
      height: 100%; } }
  @media print, screen and (min-width: 40em) {
    .index_header:before {
      background: linear-gradient(to right, rgba(36, 47, 49, 0.4) 15%, rgba(36, 47, 49, 0));
      position: absolute !important;
      top: 0rem !important;
      right: 0rem !important;
      bottom: 0rem !important;
      left: 0rem !important;
      content: '';
      width: auto;
      height: 100%; } }
  .index_header .index_header_content {
    position: relative; }
    @media screen and (max-width: 39.9375em) {
      .index_header .index_header_content {
        margin-top: -100%; } }
    @media screen and (min-width: 40em) and (max-width: 63.9375em) {
      .index_header .index_header_content {
        margin-top: -42.93333%; }
        .index_header .index_header_content h1 {
          margin-top: 5%;
          font-size: 56px;
          color: #111617;
          opacity: .7; } }
    @media print, screen and (min-width: 64em) {
      .index_header .index_header_content {
        margin-top: -34.00204%; }
        .index_header .index_header_content h1 {
          margin-top: 3%;
          font-size: 72px;
          color: #111617;
          opacity: .7; } }
    .index_header .index_header_content .index_name {
      text-align: center;
      width: 100%;
      background-color: rgba(71, 106, 105, 0.9);
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      -webkit-flex: 0 0 auto;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      min-height: 0px;
      min-width: 0px;
      width: calc(100% - 1.875rem);
      margin-right: 0.9375rem;
      margin-left: 0.9375rem;
      z-index: 1; }
      .index_header .index_header_content .index_name:after {
        position: absolute !important;
        top: 0rem !important;
        right: 0rem !important;
        bottom: 0rem !important;
        left: 0rem !important;
        content: '';
        width: auto;
        height: 100%;
        background: url(../img/header/nav2.png);
        background-repeat: repeat-x;
        margin-left: -12%;
        z-index: -1;
        opacity: .3; }
      @media screen and (max-width: 39.9375em) {
        .index_header .index_header_content .index_name {
          display: none; } }
      @media screen and (min-width: 40em) and (max-width: 63.9375em) {
        .index_header .index_header_content .index_name {
          margin-top: 21.46667%;
          padding-left: 35%; } }
      @media print, screen and (min-width: 64em) {
        .index_header .index_header_content .index_name {
          margin-top: 17.00102%;
          padding-left: 20%; } }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Josh Guberman</title>
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon/favicon-16x16.png">
    <link rel="manifest" href="assets/img/favicon/manifest.json">
    <link rel="mask-icon" href="assets/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href=".assetsimg/favicon/favicon.ico">
    <meta name="msapplication-config" content="assets/img/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

  </head>
  <body>

    <div class="top-bar" id="big">
    	<div class="top-bar-left">
    	<!--
    		<ul class="menu">
    			<li class="menu-text">Josh Guberman</li>
    		</ul>
    	-->
    	</div>
    	<div class="top-bar-right">
    		<ul class="menu">
    			<li><a href="#">About Me</a></li>
    			<li><a href="#">CV</a></li>
    			<li><a href="#">Projects</a></li>
    			<li><a href="#">Artwork</a></li>
    			<li><a href="#">Blog</a></li>
    		</ul>
    	</div>
    </div><div class="top-bar" id="small">
    	<div class="menu">
    		<div class="menu-text">Josh Guberman</div>
    	</div>
    </div>
    <div class="index_header">
    	<div class="index_headshot">
    		<img src="assets/img/header/headshot.svg" alt="headshot of Josh Guberman">
    	</div><!-- index_headshot -->
    	<div class="index_header_content">
    		<div class="index_name">
    		<h1>Josh Guberman</h1>
    		</div><!-- index_name -->
    	</div> <!-- index_header_content -->
    </div> <!-- index_header_container --><div class="about-me">
    	<div class="spacer"></div>
    	<div class="top-heading"><h2>About Me</h2></div>
    	<div class="spacer"></div>
    	<div class="about-content">
    		<p>Some words are written here</p>
    	</div>
    </div>

    <div class="footer-container">
    	<div class="footer-wrapper">
    		<div class="footer">
    			<p>&copy;Josh Guberman 2017</p>
    		</div>
    	</div>
    </div>

    <script src="assets/js/app.js"></script>
    <script>$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
  // newSize is the name of the now-current breakpoint, oldSize is the previous breakpoint
});</script>
  </body>
</html>