Why doesn't the text immediately stick to the right edge, but only after the JS is executed?

Question

css

Hello!
Using Bootstap, I'm building a site.
I think the code is intuitive, the problem is that when you first start Sign In | Sign Out are pressed against the button, and after re-opening this menu, it is pressed to the right edge, as it should be initially

<!-- HTML CODE -->
    <div class='my_login nav navbar-dark bg-dark'>
      <a class='my_close navbar-brand btn btn-second ml-2'>▽</a>
      <div class="mr-5" style="float:right;">
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link active" href="/login">Sign in</a>
          </li>
          <li><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">|</a></li>
          <li class="nav-item">
            <a class="nav-link" href="/registration">Sign up</a>
          </li>
        </ul>
      </div>
    </div>

    <div class="my_blank navbar-light bg-light" style="display: none;">
      <a class='my_open navbar-brand btn btn-light ml-2'>▷</a>
    </div>

// JavaScript Code
const show_btn = document.querySelector('.my_open');
const close_btn = document.querySelector('.my_close')
const close_block = document.querySelector('.my_blank')
const log = document.querySelector('.my_login');

show_btn.addEventListener('click', () => {
    close_block.style.display = 'none'
    log.style.display = 'block'
})

close_btn.addEventListener('click', () => {
    log.style.display = 'none'
    close_block.style.display = 'block'
})

Answer 1

because navbar-light bg-light is initially display: flex
and you give it display: block