CSS：cssを使用してヘッダ内の要素をどのように並べるのですか？

Question

私のヘッダー内のすべての要素が、一列に並んでいるようにしたい。私はまたそれらをGreyヘッダーブロックの中央に配置したい。これはこれまでのように見えます。 enter image description hereこれは私の最初のウェブサイトなので、私はちょうどその場で遊んでいるので、助けやアドバイスをいただければ幸いです。

* 
 
    ==================================== 
 
    HEADER 
 
    ==================================== 
 
*/ 
 

 
header { 
 
\t background-color: grey; 
 
\t opacity: 50%; 
 
\t width: 100%; 
 
} 
 

 
#logo { 
 
\t float: left; 
 
\t padding-top: 10px; 
 
\t padding-left: 30px; 
 
} 
 

 
#logo img { 
 
\t width: 15%; 
 
\t height: 15%; 
 
} 
 

 
#navigation { 
 
\t margin: auto; 
 
\t clear: both; 
 
\t text-align: center; 
 
\t position: relative; 
 
} 
 

 
#navigation li { 
 
\t display: inline-block; 
 
\t padding: 5px 15px 5px 15px; 
 
\t color: #fff; 
 
} 
 

 
#navigation li a { 
 
\t color: #fff; 
 
\t text-transform: uppercase; 
 
} 
 

 
nav a.selected, nav a:hover { 
 
\t border-bottom: 1px solid #fff; 
 
\t padding-bottom: 0.75px; 
 
} 
 

 
.social-media { 
 
\t text-align: right; 
 
\t padding: 0 1.5em 0 0; 
 
} 
 

 
.social-media ul li { 
 
\t display: inline; 
 
} 
 

 
.social-media img { 
 
\t width: 30px; 
 
\t height: 30px; 
 
\t margin: 0 4px; 
 
}

<header> 
 
     <div id="logo"> 
 
     <a href="index.html"><img src="img/logo.png"></a> 
 
     </div> 
 

 
     <nav id="main-controls"> 
 
     <ul id="navigation"> 
 
      <li><a href="index.html" class="selected">Home</a></li> 
 
      <li><a href="about.html">About</a></li> 
 
      <li><a href="portfolio.html">Portfolio</a></li> 
 
      <li><a href="services.html">Services</a></li> 
 
      <li><a href="contact.html">Contact</a></li> 
 
     </ul> 
 

 
     <div class="social-media"> 
 
      <a href="http://www.facebook.com"><img src="img/facebook.png" alt="Facebook"></a> 
 
      <a href="http://www.twitter.com"><img src="img/twitter.png" alt="Twitter"></a> 
 
      <a href="http://www.instagram.com"><img src="img/instagram.png" alt="Instagram"></a> 
 
      <a href="https://plus.google.com/"><img src="img/google+.png" alt="Google Plus"></a> 
 
      <a href="https://www.linkedin.com/"><img src="img/linkedin.png" alt="Linked In"></a> 
 
     </div> 
 
     </nav> 
 
    </header>

Answer 1

あなたのCSSの更新されたバージョン：

* 
    ==================================== 
    HEADER 
    ==================================== 
*/ 

header { 
    background-color: grey; 
    opacity: 50%; 
    width: 100%; 
} 

#logo { 
    display: inline-block; 
    padding-top: 10px; 
    padding-left: 30px; 
} 

#logo img { 
    width: 15%; 
    height: 15%; 
} 

#navigation { 
    display: inline-block; 
    margin: auto; 
    clear: both; 
    text-align: center; 
    position: relative; 
} 

#navigation li { 
    display: inline-block; 
    padding: 5px 15px 5px 15px; 
    color: #fff; 
} 

#navigation li a { 
    color: #fff; 
    text-transform: uppercase; 
} 

nav a.selected, nav a:hover { 
    border-bottom: 1px solid #fff; 
    padding-bottom: 0.75px; 
} 

.social-media { 
    display: inline-block; 
    text-align: right; 
    padding: 0 1.5em 0 0; 
} 

.social-media ul li { 
    display: inline-block; 
} 

.social-media img { 
    width: 30px; 
    height: 30px; 
    margin: 0 4px; 
} 

これは、水平に、すべての要素を揃えるの世話をする必要があります。宣言されたfloatプロパティを削除し、代わりにすべてのスタックされた要素にdisplay: inline-blockを使用しました。