Позиционирование элементов в bootstrap макете

Всем привет. Есть следующий небольшой макет:

<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;
}