Помощь с разметкой. Bootstrap 4

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

<div class="container-fluid">
    <div class="coments-text row">
        <div class="col-3">
            <h2>Комментарии |@(@Model?.Count() ?? 0)|</h2>
        </div>
        <div class="col-9 text-right">
            <button id="addacomment" class="btn btn-primary">Добавить комментарий</button>
            <input id="goToMain" type="submit" class="btn btn-primary" value="На главную" />
        </div>
    </div>
...
</div>

Вот что происходит: