Flexbox的与顶级

Question

意想不到的空白我有一个Flexbox的一路不充盈了我的导航栏的问题，我不能为我的生活弄清楚和负利润率绝对什么都不做

下面是截图

.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> 
 
     <a href="#" class="button">Some Action Here</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

卸下余量顶O n您的活动菜单

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