Всем привет. Есть следующий небольшой макет:
<div class="main-col">
<div class="Header container">
<div class="row justify-content-sm-center justify-content-md-between rowNav">
<div class="col btn-col d-flex px-0">
<a class="btnNav">
<h2 class="h2-calc">Money Calculation</h2>
</a>
</div>
<div class="col btn-col d-flex px-0">
<a class="btnNav">
<h2 class="h2-notebook">Notebook</h2>
</a>
</div>
</div>
</div>
<div class="MainContent container">
<div class="form d-flex justify-content-md-between pt-2">
<form>
<div class="row justify-content-md-between justify-content-sm-center">
<div class="col">
<input class="form-control" type="text" placeholder="Date">
</div>
<div class="col">
<input class="form-control" type="text" placeholder="Money">
</div>
</div>
</form>
<button type="button" class="btn btn-primary btn-add">Главный</button>
</div>
</div>
</div>
Подскажите пожалуйста, как сделать так, чтобы .Header был всегда прижат к верху экрана, а .MainContent всегда был посередине экрана. У меня почему то не получается сделать это, задав классу .main-col display: flex, а флекс элементам(.Header и .MainContent) задав align-self: flex-start и center, соответственно. Стили .main-col:
.main-col {
max-width: 900px;
margin: 0 auto;
height: 100%;
display: flex;
flex-direction: column;
}