Я не совсем уверен, как вы захотите продолжить этот проект. За то, что вы спросили, я бы go о: не нужно оборачивать ваш h1:
<h1 class="page-header">Dashboard</h1></div>
вокруг div.
Затем вы можете добавить свои классы к вашему h1 и добавьте максимальную высоту к css и отрегулируйте позиционирование с помощью отступов. HTML:
<!--navbar ends </here>-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 ">
<ul class="nav flex-column sidebar">
<li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Stats</a> </li>
<li class="nav-item"><a class="nav-link" href="#">Graphs</a></li>
<li class="nav-item"><a class="nav-link" href="#">Users</a></li>
</ul>
<ul class="nav flex-column sidebar">
<li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Revenues</a></li>
<li class="nav-item"><a class="nav-link" href="#">Countries</a></li>
<li class="nav-item"><a class="nav-link" href="#">Spammers</a></li>
</ul>
</div>
<h1 class="page-header col-sm-9 col-md-10 main">Dashboard</h1>
</div>
</div>
CSS:
<style>
body {
font-family: 'Rosario';
}
.sidebar {
margin: 10px -8px 20px 20px;
}
.sidebar>li>a {
padding: 20px 20px;
}
.main {
padding-top: 30px;
max-height: 100px;
background-color: lightgray;
}