Problems on alignment elements to the right without overlap - css

Question

I'm having a problem with the alignment of two "buttons" (links) on the right in bootstrap.
My goals are two:
To make them as right-aligned as possible.
To always have a small margin between them.
Although at first the separation between them is more or less correct and I can get them to be aligned to the right without an excessive margin of the last element on the right side, as I reduce the size of the page, both end up overlapping.
I've managed to prevent this from happening by putting mr-x, mr-sm-x,... classes on them, but I can see that it doesn't make any sense because in order for it to work more or less well, I have to put an excessive amount of classes on them. Something like:
ml-3 ml-sm-1 ml-md-1 mr-4 mr-sm-2 mr-md-2 mr-lg-1 mr-xl-0
And the result is not optimal either.
I have tried to make it work with offset classes, with align-items-end and with justify-content-end. Also with float-right, but I always have problems with margins and overlap.
Here are some images that show the problem and the example in jsfiddle
Example on jsfiddle

Answer 1

Seems like you want to use Bootstrap's button groups:
<div class="container">
<nav class="navbar heading-title">
<span class="navbar-brand mb-0 h1">Título</span>
</nav>
<nav class="navbar row justify-content-end">
<div class="btn-group" role="group" aria-label="Basic example">
<a class="btn" href="#" role="button">
<i class="fa fa-user"></i>
</a> <a class="btn" href="#" role="button">
<i class="fa fa-user"></i>
</a>
</div>
</nav>
</div>
jsFiddle example