Image in navigation - html

Question

This is what I am trying to recreate. A basic nav.
As you can see here, there is an image next to the "ABOUT US" text, that is what I am having trouble with. How exactly can I make the img appear before the "ABOUT US" text? It always appears above it. Thanks in advance!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
body {
font-family: "Open Sans",sans-serif;
}
.container {
max-width: 900px;
margin: 0 auto;
}
header {
padding: 2em 4em;
background-color: #121b21;
}
.nav-area {
list-style: none;
text-align: center;
}
.nav-area li {
display: inline-block;
padding: 0 1.5em;
color: #c4cbcf;
font-weight: 700;
font-size: 0.9em;
background-color: transparent;
}
<header>
<div class="container">
<nav>
<img src="header_logo.png" alt="Logo header">
<ul class="nav-area">
<li>ABOUT US</li>
<li>CONSULTING</li>
<li>SKYLIGHT</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>

Answer 1

Give a display:flex; property to nav and it will work :) Then you can adjust other CSS accordingly.
You may also set display:flex; on .nav-area, then you don't need inline-block on .nav-area li's.
.nav-area {
list-style: none;
text-align: center;
display:flex;
align-items:center;
}
CODEPEN WORKING DEMO: https://codepen.io/emmeiWhite/pen/WNGYJjq
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width:25px;
height: auto;
margin-left:1.5em;
}
body {
font-family: "Open Sans",sans-serif;
}
.container {
max-width: 900px;
margin: 0 auto;
}
header {
padding: 2em 4em;
background-color: #121b21;
}
nav{
display:flex;
align-items:center;
}
.nav-area {
list-style: none;
text-align: center;
}
.nav-area li {
display: inline-block;
padding: 0 1.5em;
color: #c4cbcf;
font-weight: 700;
font-size: 0.9em;
background-color: transparent;
}
<header>
<div class="container">
<nav>
<img src="https://picsum.photos/200" alt="Logo header">
<ul class="nav-area">
<li>ABOUT US</li>
<li>CONSULTING</li>
<li>SKYLIGHT</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>

Answer 2

I tried like this.
nav {
display: flex;
align-items: center;
justify-content: center;
}
If you want logo goes to left and nav-menu goes to right, try like this.
nav {
display: flex;
align-items: center;
justify-content: space-between;
}

Answer 3

Add the float attribute to the img CSS declaration to obtain the desired lay-out.
img {
max-width: 100%;
height: auto;
float: left;
}