I'm trying to figure out why I can't get this grid template to expand and/or even center the viewport. It works fine and as expected in desktop view...

Any ideas? Let me know if you require any more code snippets.

[![here is a screenshot of the problem](https://i.stack.imgur.com/i421l.png)](https://i.stack.imgur.com/i421l.png)

```
.grid-container-columns {

height: 100%;

display: grid;

grid-template-columns: repeat(12, 1fr);

grid-gap: 16px;

align-content: stretch;

}

header#home-section h1 {

grid-column: 3/span 8;

justify-self: center;

align-self: center;

text-align: center;

padding-top: 10rem;

z-index: 1;

}

```

The container div just provides a max-width of 1100px with a margin 0 auto.

Thanks for any help!