Centering elements within grid spaces

1

I’ve created a media query to change

 {display: inline-block}

to

@media (max-width: 940px) {
  #i-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr 1fr);
    grid-auto-rows: auto;
    row-gap: 30px;
    /* NOT WORKING 
    justify-items: center;
    align-items: center; */ 
  }
}

The contents are refusing to center. Is there a way to display what is happening with the grid? it might be easier to solve if I could see what was going on

The full code is viewable at
New Homepage (codepen.io)