Flex Container and child container with justify end and start [duplicate] - html

Question

This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 1 year ago.
I'm having an issue with my header, on the .container element when I apply flex the child flex-justify doesn't work, but when I remove it I can't align them center.
* {
margin: 0;
padding: 0;
text-decoration: none;
color: white;
}
header {
background: inherit;
border-bottom: 1px solid var(--border);
padding: 1rem 0rem;
background: pink;
}
/*
Remove the flex to preview
*/
header .container{
display: flex;
align-items: center;
}
.right {
display: flex;
align-items: center;
justify-content: flex-end;
background: green;
}
.left {
display: flex;
align-items: center;
justify-content: flex-start;
background: red;
}
<header>
<div class="container">
<div class="logo left">
<a href="#">
MYLOGO(IMG)
</a>
</div>
<nav class="right">
<a class="nav-link" href="">
NAV ITEM
</a>
<a class="nav-link" href="">
NAV ITEM
</a>
<a class="nav-link" href="">
NAV ITEM
</a>
<a class="nav-link" href="">
NAV ITEM
</a>
</nav>
</div>
</header>
So basically I want a container with flex to align center and its child one justify end and one right.

Answer 1

Simply do this:
header .container {
display: flex;
align-items: center;
justify-content: space-between;
/* this will put the logo.left at the left and .right at the right */
}
* {
margin: 0;
padding: 0;
text-decoration: none;
color: white;
}
header {
background: inherit;
border-bottom: 1px solid var(--border);
padding: 1rem 0rem;
background: pink;
}
/*
Remove the flex to preview
*/
header .container{
display: flex;
align-items: center;
justify-content: space-between;
}
.right {
display: flex;
align-items: center;
justify-content: flex-end;
background: green;
}
.left {
display: flex;
align-items: center;
justify-content: flex-start;
background: red;
}
<header>
<div class="container">
<div class="logo left">
<a href="#">
MYLOGO(IMG)
</a>
</div>
<nav class="right">
<a class="nav-link" href="">
NAV ITEM
</a>
<a class="nav-link" href="">
NAV ITEM
</a>
<a class="nav-link" href="">
NAV ITEM
</a>
<a class="nav-link" href="">
NAV ITEM
</a>
</nav>
</div>
</header>

Answer 2

#Its Fragilis recommended that I add display flex and justify space around, but because I was using bootstrap it showed some margin on the bottom and left. to fix that you need to add this code:
.clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after{
content: none !important;
}