Не выравнивается правильно CSS Сетка

Question

Вот мой JSFiddle: https://jsfiddle.net/zgdmhr35/

CSS,

.container {
    display: grid; 
    /* grid-template-columns: 100px autp; 
    grid-template-rows: 100px 1fr 200px 50px; */
    grid-template-areas: 
    "header header"
    "nav nav"
    "main main"
    "footer footer";
    grid-gap: .2em;

Но по какой-то причине я не могу получить это работать правильно. Кроме того, я не уверен, что мой запрос к Tablet @media правильный.

Answer 1

Я только что указал 3 столбца с grid-template-columns для элемента .root и сделал элемент main, используя оставшуюся ширину с grid-column-end. Вы можете проверить jsfiddle .