Почему элемент колонки переносится на следующую строку? Bootstrap4

Всем привет. Делаю учебный проект на react, для верстки использую bootstrap4. В панели навигации .btn-panel есть две кнопки.

<div className='app'>
<div className='container'>
  <div className="row align-self-center justify-content-center navbar">
    <div className="col btn-panel px-0">
      <div className="btn-nav py-1">
        <h2>
          <Link
            to="/"
            className='nav-link'
          >
            Money Calculation
          </Link>
        </h2>
      </div>
      <div className="btn-nav py-1">
        <h2>
          <Link
            to="/notebook"
            className='nav-link'
          >
            Notebook
          </Link>
        </h2>
      </div>
    </div>
  </div>
  <div className="row align-items-center justify-content-center content">
    <div className="col-7 col-content">
      <Switch>
        <Route path={'/'} exact component={Calc} />
        <Route path={'/notebook'} component={Note} />
      </Switch>
    </div>
  </div>
</div>

.btn-panel {
    max-width: 900px;

    .btn-nav {
        max-width: 400px;
        background-color: #fff;
        border-radius: $br-radius;
        text-align: center;
    }

    .btn-nav:hover {
        background-color: #005c9d;

        .nav-link {
            color: #fff;
        }
    }
}

Не могу понять, почему вторая кнопка переносится на новую строку, подскажите пожалуйста, как исправить?