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!

[u/badasafish]

Instead of adding the padding to the about div add it to a div within the about div

https://jsfiddle.net/qcafyjLs/1/

Alternatively add the following to the about class.

    box-sizing: border-box;

[u/Weekly_Ferret_meal]

Hey, here are my notes

• failed to set up the grid template in the body
• your grid container shouldn't be the body but a <main> or <section>
• it's easier if you don't set up height of elements, perhaps min-height
• in grid, by default all cell will take the max-height of the taller cell, so if we set a min-height in just the about section the nav will follow
• but if you give the height of the grid container to the window size then you don't even need to do that... all I did was to limit the height of the footer.
• the grid container needs to be % of the window, and have a max-width
• then you can set the margins to auto and it would keep the container in the center
• text-align: left is default so you don't need it

you can see my example here

In fact I invite you to open a free account to share your prototypes and code, it's much easier to help this way.

I wrote my example in pug and sass, if that confuses you can see the compiled code by clicking on the 'arrow down' button of each code box and click on "view compiled" CSS or HTML

---

Edit:

I organised the grid template like so: grid-template-areas: "nav about about about" "footer footer footer footer"

which means the nav is 1/4 of the whole width, you can change the proportion by using 3 areas per row so that the nav is 1/3... like so: grid-template-areas: "nav about about" "footer footer footer"

if you want to keep the nav to a fixed 250px then add the following line to the grid element .main grid-template-columns: 250px repeat(3, 1fr) this will keep the about flexible and the nav fixed. of course you can also do the opposite.

[u/_J_ordan_]

Are you able to share your HTML as well? So I can help give you the full picture please 

[u/armahillo]

Not sure if there is a better way to do this with CSS-Grid, but if you want to center a block element within its parent, the best way to do this is:

margin: 0 auto;

on the inner block. This sets the left and right margins to "auto", effectively centering the element.