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">
    <meta charset="UTF-8">
    <title>CSS GRID</title>
    <link href="main.css" rel="stylesheet" type="text/css">
   <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>

CSS code**

    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: minmax(27px, auto);
    grid-gap: .50em;
    align-items: stretch;

.wrapper > div{
  background: #eee;
  padding: 1em;  
.wrapper > div{
    background: #ddd;
    /*align-self: start;*/
    grid-column: 1/6;
    grid-row: 1/4;
  /*align-self: end;*/
    grid-column: 1/6;
    grid-row: 4/5;
  /*align-self: end;*/
    grid-column: 1;
    grid-row: 5/30;
    grid-column: 2;
    grid-row: 5/30;
    grid-column: 3;
    grid-row: 5/30
    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 (’).