The header should have a picture, text and a menu with links, the menu and text stand in one line, but the picture is above them, although they are all in the same div and the display:inline-block; should work display:inline-block;

What am I doing wrong?

 .slider { background-image: url('images/slider-bg.jpg'); width: 1920px; height: 1024px; } .header { overflow: hidden; width: 100%; height: auto; margin-left: 150px; } .header div { display: inline-block; } #logo h1 { color: black; } #navigation { margin-left: 50px; } #navigation ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } #navigation li { display: inline; color: white; text-align: center; text-decoration: none; padding: 10px; } #navigation a:link { color: black; text-decoration: none; } 
 <div class="header"> <div id="logo"> <img src="images/logo.png"> <h1>Waxom</h1> </div> <!--end logo--> <div id="navigation"> <ul> <li> <a href="*">Home</a> </li> <li> <a href="*">About Us</a> </li> <li> <a href="*">Portfolio</a> </li> <li> <a href="*">Features</a> </li> <li> <a href="*">Blog</a> </li> <li> <a href="*">Pricing</a> </li> <li> <a href="*">Shortcodes</a> </li> <li> <a href="*">Contact</a> </li> </ul> <!--end navigation--> </div> <!--end navigation--> </div> <!--end header-->

1 answer 1

The display property is not inherited, so it must be set for children. In your case, set it up for #logo h1

 .header { overflow: hidden; width: 100%; height: auto; margin-left: 150px; } .header div { display: inline-block; } #logo h1 { color: black; display: inline-block; } #navigation { margin-left: 50px; } #navigation ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } #navigation li { display: inline; color: white; text-align: center; text-decoration: none; padding: 10px; } #navigation a:link { color: blue; text-decoration: none; } 
 <div class="header"> <div id="logo"> <img src="images/logo.png"> <h1>Waxom</h1> </div> <!--end logo--> <div id="navigation"> <ul> <li> <a href="*">Home</a> </li> <li> <a href="*">About Us</a> </li> <li> <a href="*">Portfolio</a> </li> <li> <a href="*">Features</a> </li> <li> <a href="*">Blog</a> </li> <li> <a href="*">Pricing</a> </li> <li> <a href="*">Shortcodes</a> </li> <li> <a href="*">Contact</a> </li> </ul> <!--end navigation--> </div> <!--end navigation--> </div> <!--end header-->