I cannot get the content boxes in the middle to center , I would like all boxes to be flushed and center on all corners. Can someone figure this out?
you inspect my code here as well. https://clgreene1.github.io/HTML4/
my HTML Code and CSS code is here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS GRID</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="box box1"> Header</div>
<div class="box box2"> Nav</div>
<div class="box box3">Lorem ipsum dolor sit amet, .</div>
<div class="box box4"> Lorem ipsum dolor sit amet, </div>
<div class="box box5"> Lorem ipsum dolor sit amet, </div>
<div class="box box6"> footer</div>
</div>
</body>
</html>
CSS code**
.wrapper{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: minmax(27px, auto);
grid-gap: .50em;
justify-items:stretch;
align-items: stretch;
}
.wrapper > div{
background: #eee;
padding: 1em;
}
.wrapper > div{
background: #ddd;
}
.box1{
/*align-self: start;*/
grid-column: 1/6;
grid-row: 1/4;
}
.box2{
/*align-self: end;*/
grid-column: 1/6;
grid-row: 4/5;
}
.box3{
/*align-self: end;*/
grid-column: 1;
grid-row: 5/30;
}
.box4{
grid-column: 2;
grid-row: 5/30;
}
.box5{
grid-column: 3;
grid-row: 5/30
}
.box6{
grid-column: 1/6;
grid-row: 30/30;
}