特定の背景色にメニューヘッダーを作成して整列が正しく行われない

Question

私のWebページのメニューヘッダーを作成しています。

ここは私のjsfiddleです。

私のすべてのイメージとテキストは、その灰色にとどまらなければならないが、どういうわけかそれは干草である。
画像は底部に表示されています。その灰色の高さはちょっと上手く見えるはずです。

私はここに私のHTMLとCSSです..私は間違って何をしたかわからない：

<div class="topnav"> 
    <ul> 
    <li class="home"> 
     <img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png"> 
    </li> 
    <li class="dropdown"> 
     <a href="#"><b>INSURANCE</b> <i class="fa fa-angle-down"></i></a> 
     <ul class="dropdown-content">    
      <li><a href="#"><i>INDIVIDUAL</i></a></li> 
      <li><a href="#"><i>CORPORATE</i></a></li> 
     </ul> 
    </li> 
    <li class="our-story">OUR STORY</li> 
    <li class="login-signup">Log In | Sign up</li> 
    <li class="get-covered">GET <strong style="font-style:italic">COVERED</strong></li> 
    </ul> 
</div> 

マイCSS：

li.insurance{ 
    margin-right: 60px; 
} 
li.home{ 
    margin-right: 60px !important; 
    position: relative; 
    top: 15px; 
    left: 10px; 
} 
li.our-story{ 
    margin-right: 120px !important; 
} 
li.login-signup{ 
    margin-right: 20px !important; 
    font-style: italic; 
    font-family: fontawesome; 
} 
li.get-covered{ 
    border-color: #EF7440; 
    border-style: solid; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    padding-left: 30px; 
    padding-right: 30px; 
} 
ul{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    padding-top: 20p; 
    padding-bottom: 40px; 
    background-color: rgba(0, 0, 0, 0.5); 
} 
li.home{ 
    margin-right:35px; 
} 
li{ 
    display: inline; 
} 
.topnav{ 
    overflow: hidden; 
} 
.topnav ul > li{ 
    float: left; 
    display: block; 
    text-align: center; 
    padding: 14px 16px; 
} 
.topnav a{ 
    text-decoration: none; 
    font-size: 17px; 
    color: white; 
    display: block; 
} 
/* dropdown menus hidden initially */ 
.topnav ul > li > ul{ 
    display: none; 
    margin-top: 14px; 
    width: 200px; 
    padding: 0; 
    position: absolute; 
    background-color: #f76c38; 
} 
.topnav ul > li > ul > li{ 
    float: left; 
    clear: left; 
    display: block; 
    text-align: left; 
} 

私が間違って何をしたかの任意の考え？

Answer 1

..だから、物事の多くはここで間違っているが、私はあなたがこのような何かを探していると思います：

https://jsfiddle.net/3kw1uLrs/35/

私が追加されたコード以下であり、私はあなたをスタイリングulを剥奪追加されました。 topnav要素の背景色を使用しました。 これをベースに作業を続けることができます。

.topnav { 
    background:rgba(0, 0, 0, 0.5);  
    padding:0 15px; 
} 
.logo { 
    float:left; 
    margin-top:15px; 
} 
.nav-left { 
    float:left; 
} 
.nav-right { 
    float:right; 
} 

私はまた、リストの中からロゴを取り、アンカー要素でそれを置く - あなたはおそらく自分のホームページにリンクするためにそれを必要として：

<a class="logo"> 
    <img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png"> 
</a> 

いくつかのヒント：

• li要素をすべてulの下に配置しないでください。
  この場合、リストからロゴを取り出し、それを適切に配置するために2つの別々のリストにリストを分けました。
• マージンを使用して要素を配置しないでください。
  ** divのテキストボックスの右側にあなたの質問を編集して、黄色のBIG **私はあなたが目で見てください