HTML/CSS - How do I align three different elements in different way in a heady - css

Question

I have researched this problem for several days now and have found no solution so far. If this is just a beginners questions with a lot of answers out there I apologise, and please point me in the right directions.
I am trying to developp a "Headline" or "Banner" to be displayed at the top of my website.
I have a colored box, in which i want to display an image (a little off the left side), right next to it some text (the name of the website) and then centered in the middle of the box again some very short text (the name of the document, Home, Contact, things like that).
So it should look like this:
<-space-><-Image-><-Website name-><----------centered text------------------------>
So far whatever I have tried just gets me this:
<-space-><-Image-><-Website name-><-text at the left--------------------------------->
I am currently using a div element for the box with three different elements so i can format them separately in the style sheet. The main problem seems to be that the last header (Centered Text) is just created around the text, and not until the right edge of the box. So aligning left, right or in the center makes no difference.
<div class="box blue-box ">
<img class="icon" src="file://C:/Users/jafa/Desktop/juggling/website/images/white_design.png" alt="icon">
<h8 class="white-text-header">Website name </h8>
<h9 class="white-text-main-header"> Centered Text</h9>
</div>
with css style sheet:
<style>
.blue-box {
background-color: #401841;
padding: 10px;
border:1px solid white;
border-radius: 4px;
.white-text-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: left;
}
.white-text-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: center;
}
img.icon{
width: 120px;
height: auto;
align-items: left;
}
</style>
If anyone knows a better solution, I would be very grateful. Thank you for spending your time helping me.

Answer 1

You've duplicated "white-text-header" class definition. Also , left out "blue-box" class' closing brace. The code should be written as followed.
<style>
.blue-box {
background-color: #401841;
padding: 10px;
border:1px solid white;
border-radius: 4px;
}
.white-text-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: left;
}
.white-text-main-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: center;
}
img.icon {
width: 120px;
height: auto;
align-items: left;
}
</style>

Answer 2

h8 and h9 probably aren't the elements you want to be using. Update these and you will get what you want. You need to update your css classes. You have some bad syntax and duplicated names.
.blue-box {
background-color: #401841;
padding: 10px;
border:1px solid white;
border-radius: 4px;
}
.white-text-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: left;
}
.white-text-main-header {
font-family: Arial;
color: white;
font-size: 24;
display: inline-block;
text-align: center;
}
img.icon {
width: 120px;
height: auto;
align-items: left;
}
Here is the fiddle closer to what you want: https://jsfiddle.net/475sdf9w/26/

Answer 3

h8 and h9 are not standard heading tags. Related question
You can reuse text styling properties by adding the rules to the parent (font-family, font-size, and color.
font-size needs a unit -- 24px
You can create your layout with Flexbox. Learn more here.
body {
margin: 0;
}
.blue-box {
background-color: #401841;
padding: 10px;
border: 1px solid white;
border-radius: 4px;
font-family: Arial;
font-size: 24px;
color: white;
display: flex;
align-items: center;
}
.blue-box img {
/* adds space to the left of the image */
margin-left: 20px;
}
.white-text-main-header {
margin: auto;
}
<div class="box blue-box ">
<img class="icon" src="https://unsplash.it/120" alt="icon">
<h5 class="white-text-header">Website name </h5>
<h6 class="white-text-main-header"> Centered Text</h6>
</div>