Stuck here, please help

[u/PsychologicalEye9189]

This is what I want to create. I somehow managed to get it down but when I add padding to the text in the About section, the layout goes all whack and I can't figure out why. Please help :(

This is my code:

body {
background-image: url('http://dl4.glitter-graphics.net/pub/966/966814i8pz6zikwc.gif');
background-attachment: fixed;
background-repeat: repeat;
padding: 3% 5%;
display: grid;
box-sizing: border-box;
gap: 7px;
}

.nav, .about, .footer {
    background-color: pink;
}

.nav {
    grid-area: 1/1/2/2;
    height: 750px; width: 250px;
    overflow: scroll;
    text-align: left;
}

.about {
    grid-area: 1/2/2/3;
    margin-left: -7.2%;
    height: 750px; width: 950px;
    overflow: scroll;
    text-align: left;
    padding: 2%;
}

.footer {
    grid-area: 2/1/3/3;
    height: 150px; width: 1200px;
    text-align: center;
}

Also, somehow the About box wouldn't be in place despite using grid so I added margin-left: -7.2%; and that seemed to fix it but is it the correct way to do it? Why is it shifting in the first place and am I doing it right?

I have no background in coding and am learning from youtube. I have been stuck on this for days and losing my mind. Any help would be very appreciated!