Center navbar brand and pull-right 'help' icon - css

Question

I'm having trouble putting an icon to the very right of my centered brand text without shifting the brand text.
Right now, the text is centered at the top. I want to add an icon to the very right of it.
Currently, it looks like this
And I want it to look like this
My current code:
<nav class="navbar navbar-expand-lg fixed-top justify-content-center">
<a class="navbar-brand text-center">
<span class="text-strong">
Brand
</span>
</a>
</nav>
I considered just doing 3 columns and centering the brand text in the center column while putting the icon in the right column, but I don't have anything to put in the left column.

Answer 1

An easy way to add the image without affecting the centered brand name is to set the position of the image to absolute. that way is basically acting on its own and does not care about the brand name. but if you do this then you have to make sure to position it correctly.
Here is a solution I came up with that uses the absolute positioning of the image.
you might have to mess around with the margin of your image when you put one on there. but this should work. also, I only added the border to show where they were.
.container {
display:flex;
justify-content: center;
padding-top: 1vw;
padding-bottom: 1vw;
}
.brand {
display:flex;
border: 2px solid;
margin: auto;
text-align:center;
}
.brandLogo {
border: 2px solid;
display:flex;
position:absolute;
right:1vw;
}
<nav class="navbar navbar-expand-lg">
<div class="container">
<div class="brand">
<h1>Brand</h1>
</div>
<div class="brandLogo">
<img src="#" alt="brandLogo">
</div>
</div>
</nav>

Answer 2

You could also use Grid Templates which in my opinion, look much cleaner and easier to use.
.container {
font-size: 18px;
min-height: 100%;
width: 100%;
display: grid;
text-align: center;
grid-template-columns: .5fr 2.5fr .5fr;
grid-template-rows: 1fr;
grid-gap: 10px;
grid-template-areas:
"...... brand logo";
}
.brand {
grid-area: brand;
border: 2px solid;
padding: .5rem;
font-size: 3rem;
}
.brandLogo {
grid-area: logo;
border: 2px solid;
}
<nav class="navbar navbar-expand-lg">
<div class="container">
<div class="brand">
Brand
</div>
<div class="brandLogo">
<img src="#" alt="brandLogo">
</div>
</div>
</nav>

Answer 3

you can add an empty flex item before flex box!
<nav class="navbar navbar-expand-lg fixed-top justify-content-center">
<a class="navbar-brand text-center">
<span class="text-strong">
Brand
</span>
</a>
<div class="icon">
<img src='icon.svg' />
</div>
</nav>
in your css put this styles:
//flex container
.navbar{
display: flex;
justify-content: space-between;
}
//flex items
.navbar:before {
content:'';
flex-basis: 33.3333%;
}
.navbar-brand, .icon {
flex-basis: 33.3333%;
display: flex;
}
.navbar-brand {
justify-content: center;
}
.icon {
justify-content: flex-end;
}