如何修复未正确跨越的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>