HTML / CSS : Display flex on logo not working - html

Question

hope you all are doing well.
I am new to web development and I am coding along with https://www.youtube.com/watch?v=bFvfqUMjvsA&ab_channel=CodingLab and around 5:20 timestamp I am not getting the same result as the one in the video. Can anyone please help me understand what's wrong?
Edit: I tried changing to display: inline-flex; but I'm still not getting the same result.
Expected Result based on video:
Actual Result I am getting:
.sidebar header .image-text {
display: flex;
align-items: center;
}
<nav class="sidebar">
<header>
<!-- ===== Logo ===== -->
<div class="image-text">
<span class="image">
<img src="https://via.placeholder.com/100jpg" alt="candlestick logo">
</span>
</div>
<!-- ===== Logo Text ===== -->
<div class="text header-text">
<span class="name">TradeJournal</span>
<span class="creator">By RS</span>
</div>
</header>
</nav>

Answer 1

first of all, to make the code work you need that
1. the image 2. span (text)
to be inside the same parent element
so in his case, it would be .image-text but in your case is the <header>
you may think: "but I write the same CSS, why is not working?"
so yes, the problem is not in your CSS! instead is in HTML!
❌ your previous HTML code:
<nav>
<header>
<div class="image-text">
<!-- image tags code -->
</div>
<!-- text (error: you putted this outside the .image-text) -->
</header>
</nav>
✅ the code needs to be like this:
<header>
<div class="image-text">
<!-- image tags code -->
<!-- text -->
</div>
</header>
the CSS don't touch it, is ok!
good learning!

Answer 2

Add flex in Header
.sidebar header {
display: flex;
align-items: center; }

Answer 3

You are to set the flex on the parent element not child
.sidebar header{
display: flex;
align-items: center; }

Answer 4

.sidebar header {
display: flex;
align-items: center;
justify-content:center;
}
<nav class="sidebar">
<header>
<!-- ===== Logo ===== -->
<div class="image-text">
<span class="image">
<img src="https://via.placeholder.com/100jpg" alt="candlestick logo">
</span>
</div>
<!-- ===== Logo Text ===== -->
<div class="text header-text">
<span class="name">TradeJournal</span>
<span class="creator">By RS</span>
</div>
</header>
</nav>