I'm quite new to HTML and CSS and I've encountered a problem with the menu I'm currently coding.
I'd like to make a menu using nesting flexbox. It's getting close to what I want but for a reason I cannot understand, the justify-content inside the children flexbox doesn't seem to apply...
Here is my code :
header {
display: inline-flex;
height: 90px;
align-items: center;
justify-content: flex-start;
}
.avatar {
display: inline-flex;
height: inherit;
width: 200px;
background-color: #00D717;
align-items: center;
justify-content: space-around;
}
.avatar h1 {
font-size: 13px;
text-transform: uppercase;
color: white;
}
.resteHeader {
display: inline-flex;
height: inherit;
justify-content: flex-start;
align-items: center;
}
.resteHeader nav {
display: inline-flex;
height: inherit;
justify-content: space-around;
align-items: center;
}
.resteHeader nav ul {
display: inline-flex;
height: inherit;
justify-content: space-between;
align-items: center;
}<header>
<div class="avatar">
<img src="img/avatar.png">
<h1>Hoang Nguyen</h1>
</div>
<div class="resteHeader">
<nav>
<ul>
<li>
<a href="#">
<img src="img/silhouette.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="img/bulle.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="img/cloche.png" alt="">
</a>
</li>
</ul>
</nav>
<img class="logo" src="img/logo.png" alt="">
<form>
Type sor search
<input type="text">
<img src="img/loupe.png" alt="">
</form>
</div>
</header>Thanks for your help !