My navigation menu items are not appearing inline with the logo on my website. I suspect it might be due to the size of the logo. I've attempted to adjust the width property of the #logo element, but it doesn't seem to be working...
Here is a visual of the issue: http://prntscr.com/p5aygy
Logo dimensions: 496px x 109
HTML
<!--Navigation Menu-->
<nav>
<div id="logo"><img src="images/White.png"></div>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop"/>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Faq</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS FILE
nav {
margin: 0;
padding: 0;
background-color: black;
}
#logo {
display: block;
float: left;
padding: 10px 0 0 30px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
float: left;
}
@media (max-width:768px) {
#logo {
display: block;
width:100%;
text-align: center;
float: none;
padding: 20px 0 10px;
}
nav ul li {
width: 100%;
}
.toggle + a, .menu {
display: none;
}
}