Navigation menu won't vertically align with logo image - html

Question

Tried to vertically align my nav menu with my logo image but with the code I have the navbar doesn't even seem to be within the container element. Any specific error or is it multiple things?
/* Body styles */
body {
background-color: white;
margin: 0px;
width: 100%;
min-width: 1000px;
max-width: 1400px;
}
/* Header styles */
header {
background-color: white;
min-height: 140px;
height: 160px;
}
header img {
display: inline-block;
clear: left;
margin: 0;
}
/* Navigation list styles */
header .container {
margin: auto;
width: 1140px;
min-height: inherit;
height: inherit;
}
header .container .nav-logo {
min-height: inherit;
height: inherit;
width: 188px;
padding-top: 35px;
}
li {
list-style: none;
}
nav.nav-right {
min-width: 737.667px;
width: 737.667px;
float: right;
}
.nav-right ul {
display: inline-block;
margin-left: 40px;
padding: 0px;
vertical-align: top;
}
.nav-right li {
display: inline;
text-transform: uppercase;
font-family: sans-serif;
}
.nav-right li a {
display: inline-block;
color: black;
text-decoration: none;
padding: 5px 10px;
}
.nav-right li a:hover {
outline: 1px black solid;
margin: 0px;
}
<header>
<div class="container">
<div class="nav-logo">
<img src="site_logo.png" alt="Site Logo" />
</div>
<nav class="nav-right">
<ul>
<li>Menu</li>
<li>Locations</li>
<li>Nutrition</li>
<li><a href=# alt="our
story">Our Story</a></li>
<li>Rewards</li>
</ul>
</nav>
</div>
</header>

Answer 1

You needed to add a display: inline-block to your header .container .nav-logo
/* Body styles */
body {
background-color: white;
margin: 0px;
width: 100%;
min-width: 1000px;
max-width: 1400px;
}
/* Header styles */
header {
background-color: white;
min-height: 140px;
height: 160px;
}
header img {
display: inline-block;
clear: left;
margin: 0;
}
/* Navigation list styles */
header .container {
margin: auto;
width: 1140px;
min-height: inherit;
height: inherit;
}
header .container .nav-logo {
min-height: inherit;
height: inherit;
width: 188px;
padding-top: 35px;
display: inline-block;
}
li {
list-style: none;
}
nav.nav-right {
min-width: 737.667px;
width: 737.667px;
float: right;
}
.nav-right ul {
display: inline-block;
margin-left: 40px;
padding: 0px;
vertical-align: top;
}
.nav-right li {
display: inline;
text-transform: uppercase;
font-family: sans-serif;
}
.nav-right li a {
display: inline-block;
color: black;
text-decoration: none;
padding: 5px 10px;
}
.nav-right li a:hover {
outline: 1px black solid;
margin: 0px;
}
<header>
<div class="container">
<div class="nav-logo">
<img src="site_logo.png" alt="Site Logo" />
</div>
<nav class="nav-right">
<ul>
<li>Menu</li>
<li>Locations</li>
<li>Nutrition</li>
<li>Our Story</li>
<li>Rewards</li>
</ul>
</nav>
</div>
</header>

Answer 2

Just add a new css rule display: inline; for .nav-logo{};
Working codepen: https://codepen.io/Omi236/pen/YQdKZY

Answer 3

Whether or not it's the best practice, you can simply add float: left; to header .container .nav-logo
header .container .nav-logo {
min-height: inherit;
height: inherit;
width: 188px;
padding-top: 35px;
float: left;
}
https://jsfiddle.net/vu8y4uxa/
Or as suggested elsewhere use display: inline-block;

Answer 4

You can try this code :
/* Body styles */
body {
background-color: white;
margin: 0px;
width: 100%;
min-width: 1000px;
max-width: 1400px;
}
/* Header styles */
header {
background-color: white;
min-height: 140px;
height: 160px;
}
header img {
display: inline-block;
clear: left;
margin: 0;
}
/* Navigation list styles */
header .container {
margin: auto;
width: 1140px;
min-height: inherit;
height: inherit;
}
header .container .nav-logo {
min-height: inherit;
height: inherit;
width: 188px;
padding-top: 35px;
display: inline-block;//Add this
}
li {
list-style: none;
}
nav.nav-right {
min-width: 737.667px;
/*width: 737.667px;*///Remove this
/*float: right;*///Remove this
}
.nav-right ul {
display: inline-block;
margin-left: 40px;
padding: 0px;
vertical-align: top;
}
.nav-right li {
display: inline;
text-transform: uppercase;
font-family: sans-serif;
}
.nav-right li a {
display: inline-block;
color: black;
text-decoration: none;
padding: 5px 10px;
}
.nav-right li a:hover {
outline: 1px black solid;
margin: 0px;
}
<header>
<div class="container">
<nav class="nav-right">
<div class="nav-logo"><!--Move this-->
<img src="site_logo.png" alt="Site Logo" />
</div>
<ul>
<li>Menu</li>
<li>Locations</li>
<li>Nutrition</li>
<li><a href=# alt="our
story">Our Story</a></li>
<li>Rewards</li>
</ul>
</nav>
</div>
</header>

Answer 5

An option is to use flexbox, which will also save you some CSS coding. For browser compatibility please check here. The code suggested doesn't give any issues from IE11 onwards.
.container {
display: flex;
align-items: center;
}
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
ul li {
padding: 1em;
text-transform: uppercase;
font-family: sans-serif;
}
ul li a {
text-decoration: none;
color: black;
}
<header>
<div class="container">
<div class="nav-logo">
<img src="http://placehold.it/100&text=LOGO" alt="Site Logo" />
</div>
<nav class="nav-right">
<ul>
<li>Menu</li>
<li>Locations</li>
<li>Nutrition</li>
<li>Our Story</li>
<li>Rewards</li>
</ul>
</nav>
</div>
</header>

Answer 6

It's not hard, you use float: right; for nav-right but you forgot to use float: left; for nav-logo class. This will fix it!

Answer 7

I am not sure but you can try inserting your image source line nav-right class,
as i don't see the css code for nav-logo class, else write the code for nav-logo class
.nav-logo {
display: inline-block;
vertical-align: right;
max-width:100%; // or your desired size
}