проблемы с элементами списка <ul>

помогите не пойму почему браузер не слушается, При определенных размерах окна элементы li но не все а только те что должны стоять во втором ряду начинают прыгать не понятно почему ведь при большем или меньшем размере окна все норм. Даже если не уверенны посоветуйте хоть где копать на что обратить внимания, да и еще все что вы видите формирует php в цикле, так что если касяк там то все li должны бить кривыми, кароче буду рад любым вашим мыслям по поводу моей проблемы и да вот кстати та самая функция php

 `function show_photo($table_name){
        $config = config(); 
        $data = get_photo($table_name);
        $content = "";
        $li = "";
        for ($i=0; $i < count($data); $i++) {   
            $path = $config['img_folder'].$data[$i]["name"];        
            $width = $data[$i]["width"];
            $height = $data[$i]["height"];  
            $li = '<li class="gallery-box" style="width:'.$width.'%">'.
                      '<div class="heigth" style="padding-top:'.$height.'%"></div>'.
                      '<div class="gallery-box__image" style="background-image: url('.$path.')"></div>'.
                  '</li>';
            $content .= $li;
        }
            return '<ul>'.$content.'</ul>';             
    }
`
  [1]: https://i.stack.imgur.com/MGHwg.jpg