Problems with button on burger menu (bootstrap)

Question

When i open the burger menu, the "exit" button goes into the collapse itself, what's the problem?

And how to move burger button to the right side?

<header>
  <nav class="navbar navbar-expand-md navbar-toggleable">
    <a href="#" class="navbar-brand"><img src="img/barcode_zebra.png" class="rounded" alt="zebra" width="100" height="50"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars"></i></button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="navbar-item"><a href="#" class="nav-link">Главная</a></li>
        <li class="navbar-item"><a href="#" class="nav-link">Документы</a></li>
        <li class="navbar-item"><a href="#" class="nav-link">Библиотека</a></li>
        <li class="navbar-item"><a href="#" class="nav-link">Вопросы</a></li>
        <li class="navbar-item"><a href="#" class="nav-link">Контакты</a></li>
      </ul>
    </div>
    <button class="btn"><i class="fas fa-window-close fa-2x"></i></button>
  </nav>
</header>

Header

Open burger menu

Answer 1

You can move your second button to be immediately after the first button, like this:

<header>
  <nav class="navbar navbar-expand-md navbar-toggleable">
    <a href="#" class="navbar-brand"><img src="img/barcode_zebra.png" class="rounded" alt="zebra" width="100" height="50"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars"></i></button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="navbar-item"><a href="#" class="nav-link">Главная</a></li>
        <li class="navbar-item"><a href="#" class="nav-link">Документы</a></li>
        <li class="navbar-item"><a href="#" class="nav-link">Библиотека</a></li>
        <li class="navbar-item"><a href="#" class="nav-link">Вопросы</a></li>
        <li class="navbar-item"><a href="#" class="nav-link">Контакты</a></li>
      </ul>
    </div>
    <button class="btn"><i class="fas fa-window-close fa-2x"></i></button>
  </nav>
</header>

Working demo @ https://codepen.io/cfxd/pen/KEmeVL

UPDATE If you want to keep your original markup order then you can just add this CSS:

.navbar-collapse {
  order: 1;
}

Codepen updated to reflect this @ https://codepen.io/cfxd/pen/KEmeVL .