Html – Why does display: none or block; remove the grid function in my CSS?

My CSS has codes that adds both background but also grid for the placement of each section: projects and my-passion, skills, etc. When I click on "About me" and likewise "Home" nav bar, the grid disappears so the structure of the <p> is all vertical. I don’t want to make separate website and then hyperlink them because that would take away the point of learning. (Sorry about my code being sloppy since I learned how to code in HTML, CSS, and JS about a month ago)

CSS

#home {
    display: grid;
    grid-gap: 15px; 
    grid-template-rows: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;
    grid-template-columns: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;

    .self-img img {
        height: 600px;
        width: 500px;
        grid-row-start: 1;
        grid-row-end: 16;
        grid-column-start: 1;
        grid-column-end: 8;
    }
       
    .intro {
        position: relative;
        right: 15px;
        bottom: -10px;
        /* padding-top: 10px; */
        padding-left: 25px;
        padding-right: 25px;
        background-color: #ed0099;
        font-size: 17px;
        border-radius: 10px;
        grid-row: 1 / 7;
        grid-column: 7 / 14;
        line-height: 2; 
        margin: 0;
       
       }
    
    .my-skills {   
        position: relative;
        bottom: -10px;
        right: 15px; 
        font-size: 20px;
        padding: 15px;
        background-color: #ff0000;
        border-radius: 10px;
        grid-row: 1 / 7;
        grid-column: 14 / 18;
        line-height: 35px; 
        }
     
    .my-passion {
        position: relative;
        right: 25px;
        padding: 15px;
        background-color: #0cff2d;
        font-size: 15px;
        border-radius: 10px;      
        grid-row: 7 / 14;
        grid-column: 7 / 13;
        line-height: 2; 
        }
    
    .my-goal {
        padding: 15px;
        position: relative;
        right: 25px;
        background-color: #ff00f7;
        border-radius: 10px;
        font-size: 17px;
        grid-row: 7 / 13;
        grid-column: 13/ 18;
        line-height: 2;
        }


    }
    
#about-me {
    display: grid;
    grid-gap: 15px;
    grid-template-rows: auto auto auto;
    grid-template-columns: auto auto auto;
.about {
    background-color: orange;
    padding: 15px;
    border: darkorange solid 7px;
    border-radius: 10px;
}
.JPMC {
    background-color: rgb(0, 85, 255);
    padding: 15px;
    border: darkblue solid 7px;
    border-radius: 10px;
#JPMC-button {
    background-color: #0cff2d;
    display: flex;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    width: 100px;
    font-weight: bold;
    display: inline-block;
}
}
.p2 {
    background-color: rgb(163, 235, 28);
    padding: 15px;
    border: gold solid 7px;
    border-radius: 10px;
}
.p3 {
    background-color: rgb(98, 230, 22);
    padding: 15px;
    border: rgb(7, 121, 7) solid 7px;
    border-radius: 10px;
}
.p4 {
    background-color: rgb(238, 90, 171);
    padding: 15px;
    border: magenta solid 7px;
    border-radius: 10px;
}
.p5 {
    background-color: rgb(235, 56, 94);
    padding: 15px;
    border: rgb(255, 12, 12) solid 7px;
    border-radius: 10px;
}
} 
    

JavaScript

let aboutMe = document.getElementById('about-me');
let aboutMeClick = document.getElementById('about_me');
let home = document.getElementById('home');
let homeClick =document.getElementById('home_');

aboutMeClick.onclick = function(event) {
    event.preventDefault();
    home.style.display = "none";
    aboutMe.style.display = "block";

}

homeClick.onclick = function(event) {
    event.preventDefault();
    home.style.display = "block";
    aboutMe.style.display = "none";
}

I tried visibility but that didn’t help because it literally made each part invisible. I also tried splitting my CSS sheet into 2 sheets and with each onclick it will switch between the two stylesheet but that only changed the color and not actually remove the <div></div>, <p></p> and <h> for that part.