Padding to CSS Grid

Question

I am a beginner to HTML and CSS, so I've been experimenting with the different systems like Flex and CSS Grid. I've run into an issue where I can't add padding to an element inside a Grid Column. Is there any way to fix this? When I try to add padding to the physical header itself it doesn't work because it's display grid, here's the code:

header{
    width:100%;
    height: 5%;
    color: #fff;
    background: #434343;
    display: grid;
    grid-template-columns: 2fr auto;
}


header:not(menu, h1, nav){
    display: block;
    padding:500px;

}

Answer 1

It's difficult to understand what you want to accomplish based on your post, but it looks like the padding does not take place because your CSS rule is not properly targeting the element. Moving the padding into the header rule, as seen below, does apply the padding.

header{
    width:100%;
    height: 5%;
    color: #fff;
    background: #434343;
    display: grid;
    grid-template-columns: 2fr auto;
    padding:500px;
}


header:not(menu, h1, nav){
    display: block;
    /*padding:500px;*/

}

<header>
test
</header>