在使用CSS grid和/或position时，经常会遇到溢出问题：修复。您可以尝试添加溢出：hidden;添加到 Package 器元素，以防止任何内容溢出并导致布局问题。另一种解决方案是调整导致溢出的元素或其父容器的高度，以确保它们适合指定的网格单元格。您还可以尝试调整grid-template-rows属性，为溢出的元素分配更多空间。此外，您可以使用CSS属性box-sizing：边框框;以确保填充和边框包含在每个元素的指定宽度和高度中。

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background: #fff;
    font-family: 'Poppins', sans-serif;
}

#wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(9, minmax(100px, auto));
    overflow: hidden; /* Add overflow property to prevent content from overflowing */
}

.banner-text {
    grid-row: 1 / 2;
    grid-column: span 12;
    background: #262626;
    color: #ffffff;
    position: fixed;
    width: 100%;
    min-height: 100px;
    z-index: 999;
}

.main-header {
    grid-row: 2 / 3;
    grid-column: 1 / 13;
    background: #abb8c3;
}

section.mp {
    grid-row: 3;
    grid-column: span 4;
    background: #c0a16b;
}

section.jm {
    grid-row: 3;
    grid-column: span 4;
    background: #ff00cc;
}

section.parliament {
    grid-row: 3;
    grid-column: span 4;
    background: #aaa093;
}

.main-article {
    grid-row: span 2;
    grid-column: span 8;
    background: #cc6426;
}

main {
    grid-row: span 3;
    grid-column: span 8;
    background: #08b280;
}

aside {
    grid-row: 4 / 9;
    grid-column: 9 / 13;
    background: #eedd75;
}

.main-footer {
    grid-row: 9;
    grid-column: span 12;
    background: #000;
}
Here's an updated version of your CSS with the changes I suggested:

<div id="wrapper">
        <!-- Hold only four elements banner, header, article, footer -->
        <div class="banner-text">Welcome text</div>
        <header class="main-header">
            <h1>Header group</h1>
        <nav class="navigation">
            <ul class="navBar">
                <li class="list"><a href="#">Home</a></li>
                <li class="list">About Us</li>
                <li class="list">Know MP</li>
                <li class="list">Wa-East</li>
                <li class="list">Our Party</li>
                <li class="list">Activities</li>
                <li class="list">Contact Us</li>
            </ul>
        </nav>
        </header>
        <section class="mp"> <h1>MP Column</h1></section>
        <section class="jm"> <h1>JM Colum</h1></section>
        <section class="parliament"> <h1>Parliament</h1></section>
         <article class="main-article"> <h1>Header group</h1></article>
        <main> <h1>Header group</h1></main>
        <aside>Aside  <h1>Header group</h1></aside>
        <footer class="main-footer"> <h1>footer group</h1></footer>

    </div>

https://jsfiddle.net/soorush/9dx4mpw3/28/