Flex div won't align to the left but to the right - css

Question

I have a bootstrap 4 header and I'm using flex in it for some custom layout.
Here is the html:
<nav class="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="">
</a>
<div class="box">
<div class="title">TITLE HERE</div>
<div class="flex-inline-container">
<div class="icon"><img src="icon1.png" alt="" /></div>
<div class="icon"><img src="icon2.png" alt="" /></div>
<div class="icon"><img src="icon3.png" alt="" /></div>
<div class="icon"><img src="icon4.png" alt="" /></div>
<div class="icon"><img src="icon5.png" alt="" /></div>
</div>
</div>
</div>
</nav>
And the CSS:
.box {
display: flex;
border-right: 2px solid #bfbfbf;
width: min-content;
flex-direction: column;
}
.box .flex-inline-container {
display: inline-flex;
}
.box .icon {
margin-right: 20px;
cursor: pointer;
}
.box .title {
position: relative;
left: 7px;
font-size: 1.40rem;
font-weight:300;
color: #727272 !important;
}
My issue is that the "flex-inline-container" div is going all the way to the right and I need it to be on the left.
How can I make it go to the left?

Answer 1

The .container-fluid class of bootstrap has a Justify-content:space-between property. Which distributes items evenly (The first item is flush with the start,
the last is flush with the end).
In your case the <a class="navbar-brand"><a> will be moved to first and elements inside <div class="box"></div> moved to last.
If you want to override Justify-content property of .Container-fluid and move to left, Then add a .justify-content-start along with .Container-fluid.

Answer 2

.box {
display: flex;
border-right: 2px solid #bfbfbf;
width: min-content;
flex-direction: column;
}
.box .flex-inline-container {
display: inline-flex;
}
.box .icon {
margin-right: 20px;
cursor: pointer;
}
.box .title {
position: relative;
left: 7px;
font-size: 1.40rem;
font-weight:300;
color: #727272 !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<nav class="navbar">
<div class="container-fluid flex-row-reverse">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="">
</a>
<div class="box">
<div class="title">TITLE HERE</div>
<div class="flex-inline-container">
<div class="icon"><img src="icon1.png" alt="" /></div>
<div class="icon"><img src="icon2.png" alt="" /></div>
<div class="icon"><img src="icon3.png" alt="" /></div>
<div class="icon"><img src="icon4.png" alt="" /></div>
<div class="icon"><img src="icon5.png" alt="" /></div>
</div>
</div>
</div>
</nav>