Nesting within CSS Grid - html

Question

Why is the align-self/justify-self: start/center/end (or any variation) working within my 'nestedheader' container. I'm trying to get the Header box on the left-hand side, but I feel like it already should be as it is in a grid.
.header {
grid-area: header;
background-color: #222222;
}
.nestedheader {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 70px;
grid-gap: 20px;
grid-template-areas: "headername headername headercopy headercopy" "headername headername headercopy headercopy";
color: white;
font-family: 'Rubik', sans-serif;
}
.headername {
grid-area: headername;
font-size: 30px;
padding-right: 20px;
border: 5px solid red;
justify-self: start;
}
.headercopy {
grid-area: headercopy;
font-weight: lighter;
padding-right: 20px;
border: 5px solid red;
}
Here is the CodePen: https://codepen.io/anon/pen/dezVpO

Answer 1

You code was quite fine. The only thing you did not check was the size of the .header and of the .nestedheader.
They did not fill the whole first row.
Check out the changes on header and nestedheader. I simply set the width to 100%.
html, body {
margin: 0;
font-size: 100%;
}
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: minmax(100px, auto);
grid-gap: 7px;
grid-template-areas:
"header header header header"
"intro intro main main"
"intro intro main main"
"bottom bottom bottom bottom"
"bottom bottom bottom bottom"
"footer footer footer footer";
text-align: center;
}
.container > div {
padding: 5px;
border: 3px solid #222222;
display: flex;
align-items: center;
justify-content: center;
color: #2B0E24;
}
/* --- Header Start --- */
.header {
grid-area: header;
box-sizing: border-box;
width: 100%;
background-color: #222222;
}
.nestedheader {
box-sizing: border-box;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
grid-template-areas:
"headername headername headercopy headercopy";
color: white;
font-family: 'Rubik', sans-serif;
}
.headername {
grid-area: headername;
font-size: 30px;
padding-right: 20px;
border: 5px solid red;
}
.headercopy {
grid-area: headercopy;
font-weight: lighter;
padding-right: 20px;
border: 5px solid red;
}
/* --- Header End --- */
.intro {
grid-area: intro;
height: 450px;
}
.main {
grid-area: main;
height: 450px;
}
.bottom {
grid-area: bottom;
height: 800px;
}
.footer {
grid-area: footer;
height: 325px;
background-color: #222222;
color: white;
}
/* --- Footer Start --- */
.footertext {
color: white;
font-family: 'Rubik', sans-serif;
font-size: 30px;
}
.footerlinks {
font-size: 16px;
font-weight: lighter;
}
a {
color: #20bde5;
text-decoration: none;
padding: 10px;
}
a:hover {
color: white;
}
/* --- Footer End --- */
<div class="container">
<!-- Header Start -->
<div class="header">
<div class="nestedheader">
<div class="headername">Header Name</div>
<div class="headercopy">This is the page copy</div>
</div>
</div>
<!-- Header End -->
<div class="intro">Intro</div>
<div class="main">Main</div>
<div class="bottom">Bottom</div>
<!--Footer Start-->
<div class="footer">
<div class="footertext">
Here we go...<br><br>
<div class="footerlinks">
about
contact
social
</div>
</div>
<!--Footer End-->
</div>