Why my Element is going outside the header element - html

Question

There is a div with a class of favourite which is not aligning in the header section.
Yes this is a react project but it is edited like a normal project for this question.
<div className='header'>
<img class='profilePhoto' src='./userIcon'></img>
<div class='brand-logo'>
</div>
<div class='favourite'>Favourite</div> <!-- This Favourite is going outisde div.header-->
</div>
CSS File:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
width: 100vw;
height: 5rem;
background: #2475b0;
position: fixed;
}
.profilePhoto {
position: absolute;
margin-left: 32px;
vertical-align: middle;
top: 50%;
transform: translateY(-50%);
}
.brand-logo {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
.favourite {
display: inline-block;
position: relative;
right: 3rem;
}
Brand Logo CSS
.icon-box {
background: #eaf0f1;
width: 19rem;
height: 75%;
border-radius: 1rem;
text-align: center;
vertical-align: bottom;
}
.brand-name {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
margin-top: 0.3rem;
font-family: 'Luckiest Guy', cursive;
font-size: 2rem;
}
Image Preview:
Any tip will be helpful.. Thank you in advance

Answer 1

Try this piece of code in favourite class.
.favourite {
text-align: right;
position: relative;
right: 3rem;
margin-top: -45px;
}
Adjust margin-top as your need.

Answer 2

Increase the height of header div
.header {
height: 10rem;
}

Answer 3

You don't need to give position for make your logo in center. Just remove fix height from header and try using padding. Hope will help you.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
width: 100vw;
padding: 20px;
background: #2475b0;
position: fixed;
}
<div class='header'>
<div class='brand-logo'>
<img class='profilePhoto' src='/userIcon'>
</div>
<div class='favourite'>Favourite</div> <!-- This Favourite is going outisde div.header-->
</div>

Answer 4

add display: inline-block to 3 classes:
.profilePhoto, .brand-logo, .favourite {
display: inline-block;
}
and remove position attribute in class favourite. One more, i think you should use 'class' attribute, not 'className' like :
<div className='header'>

Answer 5

Try this just add height and padding.
.header {
width: 100vw;
height: 10rem;
background: #2475b0;
padding-bottom:10px;
position: fixed;
}

Answer 6

Thanks: https://stackoverflow.com/users/2875348/ravibagul91
Guys this is happening because .brand-logo is taking 100% height!
When I removed:
height: 100%
then code is working fine...
I just simply removed flexbox and used position property to align my .brand-logo
.brand-logo{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Answer 7

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
width: 100vw;
height: 5rem;
background: #2475b0;
position: fixed;
}
.profilePhoto {
position: absolute;
margin-left: 32px;
vertical-align: middle;
top: 50%;
transform: translateY(-50%);
}
.brand-logo {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
.favourite {
display: flex;
position: fixed;
top: 50px;
left: 10px;
}
<div class='header'>
<img class='profilePhoto' src='./userIcon'>
<div class='favourite'>Favourite</div>
<div class='brand-logo'></div>
</div>