adding my logo in my navigation - html

Question

I'm currently studying web development so I'm practising some html and css.
I'm having problems placing my logo on the left.
what I wish to accomplish is something like this:
prototype navigation
I have a logo on the left side of my navigation bar and on my right is my navigation menus home, partners and products that turns into a hamburger menu when the width of the screen decreases.
Can you please help me out or point me to a good resource to get my layouts properly done? thank you all in advance.
Here is my HTML code:
.menu {
margin: 0 30px 0 0;
background-color: #f8f5f2;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.menu a {
text-decoration: none;
color:black;
margin: 0 10px;
line-height: 70px;
font-family: playfair-display
}
span {
color: dodgerblue;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 20px;
float: right;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label{
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
clear: right;
display: block;
border-bottom: 1px solid black;
margin: 0;
}
#toggle: checked + .menu {
display: block;
}
}
<header>
<div class="nav">
<div id="logo">
<img src="img/logoblackandred.png" alt="logo">
</div>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Home
Partners
<span>Products</span>
</div>
</div>
</header>

Answer 1

Try
img{
display:inline;
width:70px;
height:50px;
float:left;
}

Answer 2

Like this?
I removed the position: fixed and added display: inline to #logo and #menu
.menu {
margin: 0 30px 0 0;
background-color: #f8f5f2;
overflow: hidden;
width: 100%;
display: inline;
}
.menu a
{
text-decoration: none;
color:black;
margin: 0 10px;
line-height: 70px;
font-family: playfair-display
}
span
{
color: dodgerblue;
}
label
{
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 20px;
float: right;
}
#toggle
{
display: none;
}
#logo {
display: inline;
}
#media only screen and (max-width: 500px)
{
label
{
display: block;
cursor: pointer;
}
.menu
{
text-align: center;
width: 100%;
display: none;
}
.menu a
{
clear: right;
display: block;
border-bottom: 1px solid black;
margin: 0;
}
#toggle: checked + .menu
{
display: block;
}
}
<header>
<div class="nav">
<div id="logo">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="logo" width="200px">
</div>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Home
Partners
<span>Products</span>
</div>
</div>
</header>

Answer 3

I change Html code little , and added to css code a few line.
This is Demo
.menu
{
margin: 0 30px 0 0;
background-color: #f8f5f2;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.menu a
{
text-decoration: none;
color:black;
margin: 0 10px;
line-height: 70px;
font-family: playfair-display
}
span
{
color: dodgerblue;
}
label
{
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 20px;
float: right;
}
#toggle
{
display: none;
}
.logo {
display: none;
}
.lg-logo {
float: left;
display: inline-block;
width: 50px;
margin-top: 15px;
}
#media only screen and (max-width: 500px)
{
label
{
display: inline-block;
cursor: pointer;
vertical-align: middle;
}
.menu
{
text-align: center;
width: 100%;
display: none;
}
.menu a
{
clear: right;
display: block;
border-bottom: 1px solid black;
margin: 0;
}
#toggle: checked + .menu
{
display: block;
}
.logo {
float: left;
display: inline-block;
width: 50px;
margin-top: 15px;
}
}
<header>
<div class="nav">
<div id="logo">
<img class="logo" src="http://pngimg.com/uploads/car_logo/car_logo_PNG1640.png" alt="logo">
</div>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Home
Partners
<span>Products</span>
<img class="lg-logo" src="http://pngimg.com/uploads/car_logo/car_logo_PNG1640.png" alt="logo">
</div>
</div>
</header>
Note : Resize Browser and see result.

Answer 4

Try checking below code jsfiddle link.
You can change the width for logo id and menu class https://jsfiddle.net/pradeepv/yxnLs89h/

Answer 5

Please relpace this code with your old code.
.menu
{
margin: 0 30px 0 0;
background-color: #f8f5f2;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.menu a
{
text-decoration: none;
color:black;
margin: 0 10px;
line-height: 70px;
font-family: playfair-display
}
span
{
color: dodgerblue;
}
label
{
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 20px;
float: right;
}
#toggle
{
display: none;
}
.logo {
display: none;
}
.lg-logo {
float: left;
display: inline-block;
width: 50px;
margin-top: 15px;
}
#media only screen and (max-width: 500px)
{
label
{
display: inline-block;
cursor: pointer;
vertical-align: middle;
}
.menu
{
text-align: center;
width: 100%;
display: none;
}
.menu a
{
clear: right;
display: block;
border-bottom: 1px solid black;
margin: 0;
}
#toggle: checked + .menu
{
display: block;
}
.logo {
float: left;
display: inline-block;
width: 50px;
margin-top: 15px;
}
}
<div class="nav">
<div id="logo">
<img class="logo" src="http://pngimg.com/uploads/car_logo/car_logo_PNG1640.png" alt="logo">
</div>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Home
Partners
<span>Products</span>
<img class="lg-logo" src="https://en.facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/thumb-drawn.svg" alt="logo">
</div>
</div>