Я хочу, чтобы все элементы в моем заголовке находились в горизонтальной линии в соответствии друг с другом. Я также хочу, чтобы они были сосредоточены на блоке заголовков Grey. Вот как это выглядит. enter image description here Это мой первый сайт, поэтому я просто играю в данный момент, поэтому я буду признателен за любую помощь или совет.CSS: Как выстроить элементы в моем заголовке с помощью css?
*
====================================
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>