Исходя из кода - всё верно :)
Чтобы было как тут
https://getbootstrap.com/docs/4.0/components/navs/ надо заменить код меню на:
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Также можно удалить ваши кастомные css для ul.
а чтобы меню было центрировано по высотедобавьте css
div.col-md-9{
style="display: flex;
justify-content: center;
flex-direction: column;"
}
Хотя это и не самый лучший вариант