Seeking assistance with aligning a logo next to the navigation menu on my website. Despite my attempts to adjust margins and paddings, the logo and menu appear to be misaligned. As a beginner in CSS, any guidance or tips would be highly appreciated!
https://i.sstatic.net/bRdBQ.png
.btn-header a{
color:#999;
background:rgba(0, 0, 0, 0.5);
padding:10px 20px;
font-size:12px;
text-decoration:none;
letter-spacing:2px;
text-transform:uppercase;
}
.btn-header .icon {
display: none;
}
.btn-header a:hover{
border:none;
background:rgba(0, 0, 0, 0.4);
background:#fff;
padding:20px 20px; #000;
color:#1b1b1b;
}
.btn-header img{
display: inline-block;
}
.footer{
font-size:8px;
color:#fff;
clear:both;
display:block;
letter-spacing:5px;
border:1px solid #fff;
padding:5px;
text-decoration:none;
width:210px;
margin:auto;
margin-top:400px;
}<div id="header" class="btn-header">
<img src="http://via.placeholder.com/50x50" height="50" width="50"/>
<a href="#" >How it works</a>
<a href="#" >Blog</a>
<a href="#" >Store</a>
<a href="#" >Join Us</a>
<a href="#" >Repair</a><a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>