I cannot get my CSS div boxes to center

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;
}

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).