Having Issues Making A Navigation Bar in Header - html

Question

I am trying to make a Navigation Bar for the top of my page
.header {
width: 100%;
background-color: #2C2F33;
border-bottom: 2.5px #FF9F00 solid;
font-size: 15px;
}
#logo img {
float: left;
margin: 0;
padding: 20px;
width: 187.5px;
height: 63.75px;
}
.navbar {
display: flex;
justify-content: space-between;
}
.navbar,
li {
display: inline;
padding: 0 22.5px 0 22.5px;
}
.navbar,
li,
a {
text-decoration: none;
list-style-type: none;
}
.navbar,
li,
a:hover {
color: #FF9F00;
text-decoration: none;
list-style-type: none;
}
#dollarydoos,
#dsh {
color: #FF9F00;
}
#dosh {
color: #FFFFFF;
}
<div class="header">
<div id="logo">
<img src="./img/logo.png"></img>
</div>
<div class="navbar">
<div id="leftnavbar">
<ul>
<li><span id="dollarydoos">Dollarydoos:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li>
</ul>
</div>
<div id="rightnavbar">
<ul>
<li>Button1</li>
<li>Button2</li>
<li>Button3</li>
<li>Button4</li>
</ul>
</div>
</div>
</div>
I cant get the buttons and the dollardoos to have a small box that surrounds it (inside) and to align to the center of the logo and get listed in line in the center.
Like this:
How can I do this as I am not too experienced in HTML/CSS. I am a newbie trying to build his own site.

Answer 1

I made a flexbox of the header and removed display:inline for the navbar
.header {
width: 100%;
background-color: #2C2F33;
border-bottom: 2.5px #FF9F00 solid;
font-size: 15px;
display: flex;
align-items: center;
}
#logo img {
margin: 0;
padding: 20px;
width: 187.5px;
height: 63.75px;
}
.navbar {
display: flex;
justify-content: space-between;
margin-left: auto;
}
li {
display: inline;
padding: 0 22.5px 0 22.5px;
}
.navbar,
li,
a {
text-decoration: none;
list-style-type: none;
}
.navbar,
li,
a:hover {
color: #FF9F00;
text-decoration: none;
list-style-type: none;
}
#dollarydoos,
#dsh {
color: #FF9F00;
}
#dosh {
color: #FFFFFF;
}
<div class="header">
<div id="logo">
<img src="http://placehold.it/200x100">
</div>
<div class="navbar">
<div id="leftnavbar">
<ul>
<li><span id="dollarydoos">Dollarydoos:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li>
</ul>
</div>
<div id="rightnavbar">
<ul>
<li>Button1</li>
<li>Button2</li>
<li>Button3</li>
<li>Button4</li>
</ul>
</div>
</div>
</div>