Quando uso o grid-gap as imagens sai da tela

Quando utilizo o grid-gap: .2rem; as imagens vai um pouco para direita e abre uma barra em baixo pra arrastar.

* Destaque.css:

.destaques {
    /* INDICA QUE É GRID */
    display: grid;

    /* DEFINIR ESPAÇAMENTO */
    grid-gap: .2rem;

    /* MOSTRAR QUAL VAI SER O TAMANHO DAS COLUNAS */
    grid-template-columns: 25% 25% 25% 25%;

    /* MOSTRAR QUAL VAI SER O TAMANHO DAS LINHAS */
    grid-template-rows: 33.33% 33.33% 33.33%;

    /* MOSTRA A ALTURA */
    height: calc(100vh - 50px);
}

.caixa {
    display: flex;
    align-items: flex-end;
}

.destaques__titulo {
    background-color: rgba(0, 0, 0, .5);
    color: #fdfdfdfd;
    padding: .6rem;
    text-align: center;
    width: 100%;
}

.destaques__principal {
    background: url('../img/fortnite.jpg') center / cover no-repeat;

    /* DEFININDO ATE ONDE VAI *COLUNHA* */
    grid-column: 1 / 4;

    /* DEFININDO ATE ONDE VAI *LINHA* */
    grid-row: 1 / 3;
}

.destaques__secundario:nth-child(2) {
    background: url('../img/pubg.jpg') center / cover no-repeat;

    /* DEFININDO ATE ONDE VAI *COLUNHA* */
    grid-column: 4 / 4;

    /* DEFININDO ATE ONDE VAI *LINHA* */
    grid-row: 1 / 1;
}

.destaques__secundario:nth-child(3) {
    background: url('../img/slack.png') center / cover no-repeat;

    /* DEFININDO ATE ONDE VAI *COLUNHA* */
    grid-column: 4 / 4;

    /* DEFININDO ATE ONDE VAI *LINHA* */
    grid-row: 2 / 2;
}

.destaques__secundario:nth-child(4) {
    background: url('../img/whatsapp.png') center / cover no-repeat;

    /* DEFININDO ATE ONDE VAI *COLUNHA* */
    grid-column: 4 / 4;

    /* DEFININDO ATE ONDE VAI *LINHA* */
    grid-row: 3 / 3;
}

.destaques__secundario:nth-child(5) {
    background: url('../img/cs-go.jpg') center / cover no-repeat;

    /* DEFININDO ATE ONDE VAI *COLUNHA* */
    grid-column: 3 / 3;

    /* DEFININDO ATE ONDE VAI *LINHA* */
    grid-row: 3 / 3;
}

.destaques__categorias {
    grid-column: 1 / 3;
    grid-row: 3 / 3;
}

.destaques_categorias__lista {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: space-between;
}

.destaques_categorias__item {
    align-items: center;
    background-color: #fdfdfd;
    border-left: 5px solid transparent;
    color: #333333;
    display: flex;
    padding: 1rem;
    width: 50%;
}

.destaques_categorias__link {
    color: inherit;
}

* Caso precise o style.css também:

.app {
    background: rgb(175, 175, 175);
    color: #FFF;
    display: grid;  
    font-family: Arial, Helvetica, sans-serif;

    /* INDICA QUE É GRID */
    display: grid;

    /* DEMARCA QUAIS AREAS VAO SER USADAS */
    grid-template-areas: 
    "cabecalho"
    "conteudo"
    "rodape";

    /* MOSTRAR QUAL VAI SER O TAMANHO DAS COLUNAS */
    grid-template-columns: auto;

    /* MOSTRAR QUAL VAI SER O TAMANHO DAS LINHAS */
    grid-template-rows: 50px 100vh auto;


}

.cabecalho {
    background-color: #454545;

    /* INDICAR QUAL AREA É DO GRID */
    grid-area: cabecalho;
}

.conteudo {
    background-color: #252525;

    /* INDICAR QUAL AREA É DO GRID */
    grid-area: conteudo;
}

.rodape {
    background-color: #171717;

    /* INDICAR QUAL AREA É DO GRID */
    grid-area: rodape;
}