Как исправить строки сетки CSS, которые не охватывают правильно?

Question

У меня есть контент, который не будет занимать 2 строки, если я не назначу ему позицию: по какой-то причине абсолютную, но тогда он перекрывает нижний колонтитул на страницах с более длинным контентом. Вот пример на сайте, над которым я работаю: https://carlisleacademymaine.com/pony-club-riding-center-program/

Когда я тестирую его на простом приведенном ниже коде, кажется, что он работает нормально, но на моем сайте - нет. Возможно, что-то еще на сайте вызывает проблемы, но я не могу понять это.

.container {
    display: grid;
    width: 100%;
    grid-template-columns: 400px auto;
    grid-template-rows: 40px minmax(760px, auto) auto auto;
    min-height: 100%;
    grid-gap: 0;
    position: relative;
    grid-template-areas: none;  
}
.header {
    background-color: aqua;
    grid-column: 1 / span 2;
    grid-row: 1 / 2;
}
.sidebar {
    background-color: red;
    grid-column: 1 / span 1;
    grid-row: 2 / 3;   
}
.main-content {
    background-color: chartreuse;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start:  2; 
    grid-row-end: 4;
}
.sidebar-widget {
    background-color: lightblue;
    grid-column: 1 / span 1;
    grid-row: 3 / 4;
}

.footer {
    background-color: aqua;
    grid-column: 1 / span 2;
    grid-row:   4 / 5; 
}    

<div class="container">

    <div class="header">header</div>
    <div class="sidebar">sidebar</div> 
    <div class="main-content">content </div>
    <div class="sidebar-widget">extras</div> 
    <div class="footer">This is my foot</div>        

</div>