浏览器外的Flexbox

Question

My Website that needs help...

大家好，我有一个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>