title: CSS Grid container not centered to the browser viewport
body: <p>I have defined a CSS grid with the below properties. However, I am finding that the entire grid container is not centered (vertically &amp; horizontally) to my browser window on my Chrome desktop browser (Macbook Pro 15" Display).</p>
  
  <p>Can someone help me as to how to center the entire grid container to the middle of the browser viewport?</p>
  
  <pre><code>html { 
  
      background: url('images/cbg.png') no-repeat center center fixed; 
      -webkit-background-size: cover; /* Safari */
      -moz-background-size: cover; /* Mozilla Firefox */
      -o-background-size: cover; /* Opera Browser */
      background-size: cover; /* Chrome */
  
  
      text-rendering: optimizeLegibility;
      text-align: center;
      }
  
  body {
      box-sizing: border-box;
      min-height: 100%;
      margin: 20px;
  
      justify-content: center;
      align-content: center;
      align-items: center;
      justify-items: center; 
  }
  
  .wrapper {
    display: grid;
  
    grid-template-columns: repeat(12, 1fr); 
     /* grid-template-columns: 1fr; */
    grid-gap: 5px;
  
  }
  </code></pre>
  
  <p>/**** Updated with Grid Items that go into the CSS grid container .wrapper ****/</p>
  
  <pre><code>.box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 0px;
    font-size: 150%;
  }
  
  .box-txt {
    background-color: #fff;
    color: #fff;
    border-radius: 5px;
    padding: 10px;
    font-size: 100%;
    border: 1px solid black;
  }
  
  .header1
      {
  
          grid-column-start: 1;
          grid-column-end: 12;
          grid-row-start: 2;
          grid-row-end: 3; 
          text-align: center;
          height: 80px;
          background: rgb(2,0,36);
          background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(203,203,227,1) 100%, rgba(255,211,0,1) 100%);
      }
  
  .footer{
          grid-column-start: 1;
          grid-column-end: 12;
          grid-row-start: 5;
          grid-row-end: 6;
          text-align: center;
          height: 120px;
          background: rgb(2,0,36);
          background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(203,203,227,1) 100%, rgba(255,211,0,1) 100%);
      }
  
  .imgbox {
          grid-column-start: 6;
          grid-column-end: 12;
          grid-row-start: 3;
          grid-row-end: 4;
          height: 500px;
      }
  
      .imgbox &gt; img {
          width: 100%;
          height:100%;
          display: block;
          object-fit: cover;
          border-radius: 5px;
          }
  
      .b {
          grid-column-start: 2;
          grid-column-end: 3;
          grid-row-start: 2;
          grid-row-end: 3;
      }
      .c {
          grid-column-start: 1;
          grid-column-end: 6;
          grid-row-start: 3;
          grid-row-end: 4;
      }
      .d {
          grid-column-start: 7;
          grid-column-end: 12; 
          grid-row-start: 4;
          grid-row-end: 5;
      }
  </code></pre>