Why doesn't my `inline-block` work? - html

Question

I've been trying to figure out why my #logo doesn't behave as it should, having display: inline-block;, #logo and #main_nav should be on the same line, however it doesn't. Why is this and how can I fix it?
#logo {
margin: 5px;
background-repeat: no-repeat;
background-size: 350px;
width: 350px;
height: 100px;
background-image: url("http://www.jeffarries.com/media/pictures/logos/jeff_cursive.png");
display: inline-block;
}
ul, li {
display: block !important;
}
li, ul {
display: inline-block;
}
#main_nav {
float: right;
display: inline-block;
margin: 10px;
}
.nav_button:link {
text-transform: uppercase;
display: inline-block;
text-decoration: none;
font-family: arial;
font-size: 16px;
margin: 10px;
padding-bottom: 2px;
position: relative;
color: black;
}
.nav_button:visited {
color: black;
}
<div id="logo"></div>
<div id="myNav" class="overlay">
<div id="main_nav" class="overlay-content">
<a class="nav_button" href="/">Home</a>
<!-- <a class="nav_button" href="">Blog</a>
<a class="nav_button" href="">Trips</a> -->
<a class="nav_button" href="/politics">Politics</a>
<!-- <a class="nav_button" href="">Pictures</a> -->
<a class="nav_button" href="/videos">Videos</a></li>
<!-- <a class="nav_button" href="">Computer</a></li> -->
</div> <!-- close main_nav -->
</div> <!-- close myNav-->

Answer 1

Your parent #myNav doesn't have apply any style, so the browser default would set the display to block. Hence make it wrap to another line. Make it inline-block to fix the problem.
#logo {
margin: 5px;
background-repeat: no-repeat;
background-size: 350px;
width: 350px;
height: 100px;
background-image: url("http://www.jeffarries.com/media/pictures/logos/jeff_cursive.png");
display: inline-block;
}
ul {
display: block;
}
li, #myNav {
display: inline-block;
}
#main_nav {
float: right;
margin: 10px;
display: inline-block;
}
.nav_button:link {
text-transform: uppercase;
display: inline-block;
text-decoration: none;
font-family: arial;
font-size: 16px;
margin: 10px;
padding-bottom: 2px;
position: relative;
color: black;
}
.nav_button:visited {
color: black;
}
<div id="logo"></div>
<div id="myNav" class="overlay">
<div id="main_nav" class="overlay-content">
<ul>
<li><a class="nav_button" href="/">Home</a></li>
<li><a class="nav_button" href="/politics">Politics</a></li></ul>
</div> <!-- close main_nav -->
</div> <!-- close myNav-->

Answer 2

Add width to your nav container and align the text to center. The inline-block depends on the space, it will move to second line if there is not enough space.
#logo {
margin: 5px;
background-repeat: no-repeat;
background-size: 350px;
width: 350px;
height: 100px;
background-image: url("http://www.jeffarries.com/media/pictures/logos/jeff_cursive.png");
display: inline-block;
}
ul,
li {
display: block !important;
}
li,
ul {
display: inline-block;
}
#myNav {
float: right;
display: inline-block;
text-align: right;
vertical-align: top;
margin-top: 25px;
}
#main_nav {
width: 250px;
margin: 10px;
}
.nav_button:link {
text-transform: uppercase;
display: inline-block;
text-decoration: none;
font-family: arial;
font-size: 16px;
margin: 10px;
padding-bottom: 2px;
position: relative;
color: black;
}
.nav_button:visited {
color: black;
}
<a href="/">
<div id="logo"></div>
</a>
<div id="myNav" class="overlay">
<div id="main_nav" class="overlay-content">
<a class="nav_button" href="/">Home</a>
<!-- <a class="nav_button" href="">Blog</a>
<a class="nav_button" href="">Trips</a> -->
<a class="nav_button" href="/politics">Politics</a>
<!-- <a class="nav_button" href="">Pictures</a> -->
<a class="nav_button" href="/videos">Videos</a>
<!-- <a class="nav_button" href="">Computer</a></li> -->
</div>
<!-- close main_nav -->
<!-- close myNav-->