I am having an issue in regards to intro mask. I am using codes based of register-classic.html. If I were to wrap the who Nav and Intro section into a header tag wrapper all the content inside it is not displaying. But if I were to remove the header tag the contents are displaying. The issue is regarding the <header></header> tag I think, I can't figure out what's wrong with it though. Navigation and Intro HTML section:

<!-- Navigation & Intro -->
<header>
	<!-- Navbar -->
	<nav class="navbar navbar-toggleable-md fixed-top navbar-dark bg-primary scrolling-navbar">
		<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#nav" aria-controls="nav" aria-expanded="false" aria-label="Toggle Navigation">
			<span class="navbar-toggler-icon"></span>
		</button>

		<!-- Logo -->
		<a class="navbar-brand" href="index.php">
			F2O
		</a>

		<div class="collapse navbar-collapse" id="nav">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item">
					<a class="nav-link" href="index.php">Home</a>
				</li>
			</ul>
			<ul class="navbar-nav ml-auto nav-flex-icons">
				<li class="nav-item">
					<a class="nav-link"><i class="fa fa-facebook"></i></a>
				</li>
				<li class="nav-item">
					<a class="nav-link"><i class="fa fa-twitter"></i></a>
				</li>
				<li class="nav-item">
					<a class="nav-link"><i class="fa fa-instagram"></i></a>
				</li>
			</ul>
		</div>
	</nav>

	<!-- Navbar Mask -->
	<div class="view hm-black-strong">
		<div class="full-bg-img flex-center">
			<div class="container">
				<div id="intro" class="row">
					<!-- First Col -->
					<div class="col-lg-6">
						<div class="description">
							<h3 class="h3-responsive animate wow fadeInLeft text-white">Register an account today!</h3>
							<hr class="hr-light wow fadeInLeft">
							<p class="wow fadeInLeft text-white" data-wow-delay="0.4s">
								Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.
							</p>
						</div>
					</div>

					<!-- Second Col -->
					<div class="col-lg-6 wow fadeInRight hidden-down">
						<!-- Register Card -->
						<div class="intro card-wrapper">
							<div id="intro-card" class="card-rotating effect__click ">

								<!-- Front Side -->
								<div class="face front card">
									<!-- FAB Login -->
									<a class="btn-floating btn-small btn-action rotate-btn light-blue" data-card="intro-card" data-toggle="tooltip" data-placement="left" title="Login"><i class="fa fa-sign-in"></i></a>

									<!-- Content -->
									<div class="content">
										<h4><i class="fa fa-user-plus"></i> Register</h4>
										<hr>
										<div class="md-form">
											<i class="fa fa-user prefix"></i>
											<input type="text" id="r-name" class="form-control" required>
											<label for="r-name">Name</label>
										</div>
										<div class="md-form">
											<i class="fa fa-envelope prefix"></i>
											<input type="email" id="r-email" class="form-control" required>
											<label for="r-email">Email</label>
										</div>

										<div class="md-form">
											<i class="fa fa-lock prefix"></i>
											<input type="password" id="r-pass" class="form-control" required>
											<label for="r-pass">Password</label>
										</div>

										<div class="text-center">
											<button class="btn btn-cyan btn-lg"><strong>Register</strong></button>
										</div>
									</div>

								</div>
								<!-- /.Front Side -->

								<!-- Back Side -->
								<div class="face back">
									<!-- Content -->
									<div class="content">
										<h4><i class="fa fa-sign-in"></i> Login</h4>
										<i class="fa fa-close rotate-btn" data-card="intro-card"></i>
										<hr>
										<div class="md-form">
											<i class="fa fa-envelope prefix"></i>
											<input type="email" id="l-email" class="form-control">
											<label for="l-email">Email</label>
										</div>

										<div class="md-form">
											<i class="fa fa-lock prefix"></i>
											<input type="password" id="l-pass" class="form-control">
											<label for="l-pass">Password</label>
										</div>

										<div class="text-center">
											<button class="btn btn-secondary btn-lg"><strong>Login</strong></button>
										</div>
									</div>

								</div>
								<!-- /.Back Side -->

							</div>
						</div>
						<!-- /.Rotating card -->
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- /.Navbar Mask -->
</header>
<!-- /.Navigation & Intro -->

css:

html, body, header, .view {
    height: 100%;
}

/* Navigation */
.navbar {
    background-color: 2196F3;
}

.navbar-brand {
    font-weight: 900 !important;
}

.top-nav-collapse {
    background-color: #2196F3;
}

@media only screen and (max-width: 768px) {
    .navbar {
        background-color: #2196F3;
    }
}

/* Intro */
.view {
    background: url("../img/social_connect_bg.png") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* intro-card */
@media (max-width: 768px) {
    .full-bg-img,
    .view {
        height: 100%;
        position: relative;
    }
}

.description {
    padding-top: 20%;
    padding-bottom: 3rem;
    color: #fff
}

.intro.card-wrapper {
    height: 390px;
}

@media (max-width: 992px) {
    .description {
        padding-top: 7rem;
        text-align: center;
    }
}

/*Footer*/
@media (max-width: 768px) {
    .flex-center {
        align-items: center;
    }
}
@media (max-width: 1200px) {
    .flex-center {
        align-items: left;
    }
}

---