Flexbox with unexpected whitespace at top - html

Question

I have an issue with a flexbox not filling up all the way to my navbar, I cannot for the life of me figure it out and a negative margin does absolutely nothing
Here's a screenshot
.hero {
background-image: url("https://unsplash.it/1500?random");
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: -10px;
}
.hero>.center-content {
width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: auto;
}
.hero>.center-content h1,
.center-content h3 {
color: white;
line-height: 1;
}
.hero>.center-content h1 {
text-transform: uppercase;
font-size: 3em;
margin-bottom: 0;
text-align: center;
}
.hero>.center-content h3 {
margin-bottom: 40px;
font-size: 1.5em;
font-weight: normal;
}
.center-content>.button {
text-transform: uppercase;
color: white;
padding: 20px;
border: 1px solid white;
text-decoration: none;
}
.center-content>.button:hover {
background-color: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.7);
color: #006594;
}
<div class="container" id="heroImage">
<div class="hero">
<div class="center-content">
<h1>Lazris</h1>
<h3>Revive Your Web Presence</h3>
Some Action Here
</div>
</div>
</div>

Answer 1

Remove the margin top on your active menu
.nav > .active {
/** margin-top: 10px; Remove **/
}