Поддержка Проблемы и решения Вывод по сетке

  • Здравствуйте уважаемые друзья! Я выводил похожие записи сеткой, но почему-то выглядит «абрадакаброй», никак не могу прижимать к краям, между блоками непонятные пустые пространства, помогите пожалуйста сделать нормальную сетку. Вот скриншот https://drive.google.com/file/d/1_OYTqtZtXRUKtWe3h1VKl369djg3xFHL/view?usp=drivesdk
    А это мой код css :

    div.related_posts {position:relative ;display:table-cell ;
    overflow:hidden;zoom:;
     border:1px solid #ddd;right :3%;left:3%;-webkit-box-shadow:6px 6px 11px grey;-moz-box-shadow:6px 6px 11px grey;box-shadow:5px 4px 5px;
    }
    .related_posts #box-cel {} 
    .related_posts {border:1px solid black 
    }
    .related_posts li { background:white;
    height:auto;
     float:left;
     padding :0 10px 0 0;margin-bottom:-2em;
     border:6px solid #eee ;
     width:25%;
     list-style:none;display:table ;clear:
    }
    .related_posts a {display:block ;
     font-weight:900;
     color:#555;
    }
    .related_posts a:hover {
     color:darkblue;
    }
    .related_posts img{-webkit-box-shadow:6px 6px 11px grey;-moz-box-shadow:6px 6px 11px grey;box-shadow:5px 4px 5px;
     width: 98%;
     height: 100px;
     padding: px;
     border:1px solid #999;
     background:#fff;
     margin:0 0px 0px 0;vertical-align: middle;
    }
    .related_posts img[alt] {font-size:12px; }
    .related_posts h3{background:red;color:white;font-weight:bold;Border:1px solid #ddd;font-size:2em;-webkit-box-shadow:6px 6px 11px grey;-moz-box-shadow:6px 6px 11px grey;box-shadow:5px 4px 5px;} 

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]