我的頁面中有一些元素基本上是空的，但是當我寫了幾行css時，我看到了一些元素。它們導致其他元素過剩。我在我的包裝上使用網格顯示，然后位置:固定在我的橫幅文本襯墊上。其他的只是我做的普通css代碼。

我已經禁用并做了一些重寫，但仍然不能得到它的權利。 看了一些建議，但似乎對我的具體問題沒有幫助。

超文本標記語言

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

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

*{
    padding: 0;
    margin: 0;
}
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));
}
.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;
}

使用CSS網格和/或位置時經常會遇到溢出問題:已修復?？梢試L試添加溢出:隱藏；以防止任何內容溢出并導致布局問題。另一種解決方案是調整導致溢出的元素或其父容器的高度，以確保它們適合指定的網格單元。您還可以嘗試調整grid-template e-rows屬性，為溢出的元素分配更多的空間。此外，您可以使用CSS屬性box-sizing:border-box；確保填充和邊框包含在每個元素的指定寬度和高度中。

* {
    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>