ナビゲーションのヘッダコンテナが表示されない

Question

header.main-header要素に問題があります。ヘッダはビューポートに表示されません。私はそれを見えるように高さの値を挿入しました。誰かが私を助けて、高さが挿入されていないときに目に見えない理由を説明することはできますか？

.main-header { 
 
    background: yellow; 
 
    padding: 0 3em; 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 0; 
 
    height: 85px; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.main-nav { 
 
    position: relative; 
 
} 
 

 
.nav-left { 
 
    float: left; 
 
} 
 

 
.nav-right { 
 
    float: right; 
 
} 
 

 
.middle { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translate(-50%,0); 
 
} 
 

 
.nav-right li { 
 
    display: inline-block; 
 
}

<header class="main-header"> 
 
<nav class="main-nav"> 
 
    <ul class="nav-left"> 
 
    <li><a href="">Try Dropbox Business</a></li> 
 
    </ul> 
 

 
<div class="middle"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Dropbox_logo_%28September_2013%29.svg/200px-Dropbox_logo_%28September_2013%29.svg.png" alt="Dropbox Logo" /> 
 
</div> 
 

 
    <ul class="nav-right"> 
 
    <a href="#">Download the app</a> 
 
    <li><a href="#">Sign in</a></li> 
 
    </ul> 
 
</nav> 
 
</header>

ここCodepenでの私の仕事です： http://codepen.io/marcvs/pen/Gjwdov?editors=1100

また、NAV内の要素の配置に関しては、私は/左/中央から要素を配置するために全力を試してみました中間。しかし、ナビゲーションバーの右側が右に伸びていて、下のスクロールバーがあります。要素を置き換えるための最良の技術は何ですか？

私の仕事を改善するためのヒントを教えてください。ありがとうございました。

Answer 1

あなたはそのヘッダーを達成するためにそんなにスタイルを追加する必要はありません。

スタートをあなたのメインヘッダータグを見ることで。メインヘッダの幅がページの100％である場合、子ブロックnavも100％になります。

ここで、パーセンテージを使用して、メニューをヘッダーに合わせます。あなたはあなたが幅の1/3にそれぞれの幅を設定することができるので、彼らはフィットする必要がありますので、ナビゲーション内に3人の子供がいます。ボーダーと詰め込み回数（それぞれ30％の幅を試してみましょう。浮動小数点数を持つ：子供の3つすべてに残してください）。

Answer 2

 
You need to put clear after last ul where is float:right; 

Because you have float, and parent element doesn't have height when float is there. 

So after last ul put div class="clear" with css .clear {clear:both;} 

Or if you are using bootstrap you have class clearfix. pun in nav class="main-nav clearfix"