Bootstrap 4导航栏响应问题

Question

我在Angular应用程序中有一个Boostrap 4导航栏。有一些响应性的问题。在一定的宽度减小后，徽标移到右侧，但在其他宽度上，徽标保持在左侧。另外，如何使登录和注册按钮始终处于正确状态？

下面是相同的codepen。bootstrap代码如下：

<div class="header">
  <nav class="navbar fixed-top navbar-expand-lg navbar-light" role="navigation">
    <div class="container">
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <i class="fa fa-bars"></i>
      </button>
      <a class="navbar-brand" href="/">
        <img class="img-fluid" src="https://www.keyshot.com/wp-content/uploads/2015/07/keyshot-6-logo-150.png">
      </a>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav ml-auto">
          <li class="nav-item">
            <a (click)="goToDiv('features')" class="nav-link">Features</a>
          </li>
          <li class="nav-item">
            <a (click)="goToDiv('exams')" class="nav-link">Exams</a>
          </li>
          <li class="nav-item">
            <a (click)="goToDiv('pricing')" class="nav-link">Pricing</a>
          </li>
          <li class="nav-item">
            <a (click)="goToDiv('app')" class="nav-link">App</a>
          </li>
          <li class="nav-item">
            <a (click)="goToDiv('contact')" class="nav-link">Contact</a>
          </li>
        </ul>
      </div>
      <ul class="nav navbar-nav ml-auto d-block d-sm-none step">
        <li class="nav-item">
          <a routerLink="/login" class="login re-hover nav-link">
            <i class="fa fa-sign-in" aria-hidden="true"></i>
          </a>
        </li>
        <li class="nav-item">
          <a routerLink="/register" class="login nav-link">
            <i class="fa fa-user-plus" aria-hidden="true"></i>
          </a>
        </li>
      </ul>
      <ul class="nav navbar-nav ml-auto d-none d-sm-block step">
        <li class="nav-item">
          <a routerLink="/login" style="color: #32c8fa" class="login nav-link"><i class="fa fa-sign-in" style="margin-right: 5px;" aria-hidden="true"></i><b>LOGIN</b></a>
        </li>
        <li class="nav-item">
          <a routerLink="/register" style="color: #32c8fa" class="login nav-link"><i class="fa fa-user-plus" style="margin-right: 5px;" aria-hidden="true"></i><b>REGISTER</b></a>
        </li>
      </ul>
    </div>
  </nav>
</div>