عدم درست نشان دادن ریسپانسیو قالب شماره یک menu img

با سلام و ادب

کد زیر در سایز 992 نوشته شده :

@media screen and (max-width: 992px){
    #our-story{
        height: 550px;
        padding: 0;
    }
    header nav ul{
        display: none;
    }
    .hamburger-icon{
        display: block;
        float: right;
    }
    .hamburger-icon img{
        margin-top: 10px;
        cursor: pointer;
    }
    header nav .logo{
        float: left;
    }
    #our-story .story-desc{
        width: 100%;
    }
    #our-story .story-img{
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }
    #our-story .story-img img{
        width:400px;
    }
    #menu .menu-desc{
        width: 100%;
    }
    #menu .menu-img{
        width: 100%;
        margin-top: 30px;
    }
    #menu .menu-desc h1{
        margin-top: 0;
    }
    #menu .menu-img ul li{
        width: 25%;
    }
    #menu .menu-img ul li img{
        width: 200px;
    }
}

تصویر زیر را نشان می دهد:

فاصله بین عکسها زیاد است و هر جقدر کوچکتر می شود به 768 نمی رسد باز عکس ها به هم میخورد مثل تصویر زیر می شود:

ممنون میشم راهنمایی بفرمایید