Flexbox вне браузера

Question

Мой сайт, которому нужна помощь ...

Привет всем, у меня есть Flexbox и каким-то образом Flexbox выходит за пределы браузера (см. Рисунок). Ты знаешь почему?

4 контейнера должны оставаться внутри браузера и не выходить за его пределы .....

Я хочу изменить размер, чтобы разместить его в браузере, большое спасибо заранее

.grid-box{
    display: grid;

    position: fixed;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:

            "box2 box2 box2 box2 "
            "box2 box2 box2 box2 "
            "box2 box2 box2 box2 "
            "box1 box1 box1 box1 "
            "box1 box1 box1 box1 ";
}



.box1 {
    grid-area: box1;
    background-color: #ff7443;

    margin-right: 4%;
    height: 100%;
}


.box2 {
    grid-area: box2;
    background-color: #3fc3ee;
   margin-top: 10%;
    float: left;
    height: 100%;
    width: 100%%;
}

@media screen and (min-width:736px) {
    .grid-box {
        display: grid;
        flex: 1;
        flex-basis: content;
        flex-wrap: nowrap;
        justify-content: space-around;
        position: fixed;
        width: 100%;
        height: 100%;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:

                "box1 box2 box2 box2 "
                "box1 box2 box2 box2 "
                "box1 box2 box2 box2 "
                "box1 box2 box2 box2 ";
    }


    .box1 {
        grid-area: box1;
        background-color: #ff7443;
        margin-top: 30%;
        margin-right: 4%;
        height: 100%;
    }

}

<div class="grid-box">

    <div class="box1">
     

    </div>

    <div class="box2">

    </div>