Aligning divs in a header - html

Question

.header {
background-color: yellow;
font-family: 'Arial';
display: inline-block;
}
.leftheader{
float: left;
}
#Logo{
font-size: 40px;
font-weight: 700;
display: inline-block;
}
#LogoLTD{
font-size: 20px;
display: inline-block;
}
.rightheader{
display: flex;
float: right;
}
.rightheader a{
color: black;
font-size: 20px;
font-weight: 700;
text-decoration: none;
}
<section class="header">
<div class="leftheader">
<div id="Logo">COMPANY NAME</div>
<div id="LogoLTD">LIMITED</div>
</div>
<div class="rightheader">
HOME
WHO
CONTACT
</div>
</section>
I have been trying to make a header for my site but I can't get the aligning right.
I want to have my links on the right of the page inside the yellow box.
The yellow colour should be inside the header class.
Then the leftheader div and the rightheader div should be inside the header class. And they should be positioned on the left and right but I cannot get this to work whatever I do :(
My HTML is:
<section class="header">
<div class="leftheader">
<div id="Logo">COMPANY NAME</div>
<div id="LogoLTD">LIMITED</div>
</div>
<div class="rightheader">
HOME
WHO
CONTACT
</div>
</section>
My CSS is:
.header {
background-color: yellow;
font-family: 'Arial';
display: inline-block;
}
.leftheader{
float: left;
}
#Logo{
font-size: 40px;
font-weight: 700;
display: inline-block;
}
#LogoLTD{
font-size: 20px;
display: inline-block;
}
.rightheader{
display: flex;
float: right;
}
.rightheader a{
color: black;
font-size: 20px;
font-weight: 700;
text-decoration: none;
}

Answer 1

You can do that using flex. Check out the code below.
.header {
background-color: yellow;
font-family: 'Arial';
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.leftheader{
display: flex;
align-items: flex-end;
}
#Logo{
font-size: 40px;
font-weight: 700;
display: inline-block;
}
#LogoLTD{
font-size: 20px;
display: inline-block;
padding-bottom: 5px;
}
.rightheader{
display: flex;
}
.rightheader a{
color: black;
font-size: 20px;
font-weight: 700;
text-decoration: none;
}
<section class="header">
<div class="leftheader">
<div id="Logo">COMPANY NAME</div>
<div id="LogoLTD">LIMITED</div>
</div>
<div class="rightheader">
HOME
WHO
CONTACT
</div>
</section>

Answer 2

Just add width: 100% to your header, things will look more like you want them:
.header {
background-color: yellow;
font-family: 'Arial';
display: inline-block;
width: 100%;
}

Answer 3

This should do the work.
.header {
display: flex;
flex-wrap: wrap;
background: yellow;
padding: 8px;
}
.leftheader {
display: inline-block;
color: red;
width: 60%;
}
.rightheader {
display: inline-block;
width: 40%;
text-align: right;
}