Bootstrap 4 collapsed navbar brand not centered

Question

I'm trying to get brand-item and nav-items aligned on mobile view.

Mobile view --> Aling wrong. Not centered. "Brand" should be vertically aligned with "link1-3"
Desktop view --> Aling should be like this

I have tried different things without luck.
This is one of the things I tried but it didn't work.

My code atm: Codeply.com

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <a href="#" class="navbar-brand mx-auto">Brand</a>    
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>   
    <div class="collapse navbar-collapse justify-content-end nav-justified" id="navbarNav">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#">Link 1<span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="#">Link 2</a>
        <a class="nav-item nav-link" href="#">Link 3</a>
      </div>
    </div>
</nav>

What I need to do to get brand-item and nav-items aligned?

---

Edit1: Updated 1. image & Better description of what I'm trying to achieve.

Edit2: Solution found! Every answer I got solves my problem. But dmbaughman's answer is simplest and is not disturbing other content on the website.

Answer 1

Because you are using the mx-auto and it's working correctly the center between the start of screen and the button at the right it's a little before....see the jpeg you will see that now it's centered because i removed the button the mx-auto find the center between two elements.... SO at first look you can usee margin style in percentual and move a little the brand at right... Bye

Do this resolve your problem?

change the a brand in this way

               <a href="#" class="navbar-brand mx-auto"><span style="margin-left:50%">Brand</span></a>

The result

Answer 2

The problem is that the .navbar-brand link is not as wide as the links below, because it shares space with the menu icon on the right. If you just make the menu icon absolutely positioned, it will be removed from the document flow and the brand/links will align properly.

Current

Add these styles to .navbar-toggler

.navbar-toggler {
  position: absolute;
  top: 8px;
  right: 16px;
}

Result