when run the html code all thing is fine but you can try different ways
for examples:

<nav class="navbar mr-auto navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<a class="navbar-brand" href="#">Home</a>

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link text-dark" href="#">Page 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" href="#">Page 2</a>
    </li>
</ul>      

• or set direction for ul like this <ul class="navbar-nav" style="direction: ltr">

• or set style in css for ul tag :

  ul {
      display: flex;
      justify-content: flex-start;
      align-items: center;
  }
  

I have this navigation

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
    <a class="navbar-brand" href="#">Home</a>

    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link text-dark" href="#">Page 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark" href="#">Page 2</a>
        </li>
    </ul>      
</nav>

How can I bring the list items ul on the right site?

I do not want to change the direction. I want to move the complete ul item on the right site