Help please, how can I put this preview with the images in the center?

Here's how it looks, on the left, but you need in the center s017.radikal.ru/i429/1608/01/161283a467aa.jpg

<div class="chess-grid" data-margin="7" data-text-position="auto" data-columns="2" style="height: 5369px; visibility: visible;"> <div id="i1288251" class="chess-grid-item text-hover" data-type="2x2" data-color="" data-href="http://www.jezhora-family.ru/denis-i-katja" style="width: 377px; height: 377px; top: 0px; left: 0px;"> <div class="chess-grid-text"> <div class="cell"> <div class="middle"> <h2 data-color="" data-line-color="">Денис и Катя</h2> <span data-color="">Франция, Бретань и Нормандия <br> 2015</span> <a href="http://www.jezhora-family.ru/denis-i-katja" data-color="">смотреть</a> </div> </div> </div> <div class="chess-grid-image" data-width="1000" data-height="1127"> <div class="cell loaded" style="background-image: url(&quot;http://static1.gophotoweb.com/u4723/8066/photos/1288251/500-28613dbda6b41e04f543291a8dc946bd.jpg&quot;);"> </div> </div> </div> <div id="i1423821" class="chess-grid-item text-hover" data-type="2x2" data-color="" data-href="http://www.jezhora-family.ru/sasha-i-jura" style="width: 377px; height: 377px; top: 0px; left: 384px;"> <div class="chess-grid-text"> <div class="cell"> <div class="middle"> <h2 data-color="" data-line-color="">Саша и Юра</h2> <span data-color="">Минск 2015</span> <a href="http://www.jezhora-family.ru/sasha-i-jura" data-color="">смотреть</a> </div> </div> </div> <div class="chess-grid-image" data-width="1000" data-height="1116"> <div class="cell loaded" style="background-image: url(&quot;http://static1.gophotoweb.com/u4723/8066/photos/1423821/500-e6c737dfe7f503bece80418d5f55ab4c.jpg&quot;);"> </div> </div> </div> <div id="i1234548" class="chess-grid-item text-hover" data-type="2x2" data-color="" data-href="http://www.jezhora-family.ru/nashe-malenkoe-schaste" style="width: 377px; height: 377px; top: 384px; left: 0px;"> <div class="chess-grid-text"> <div class="cell"> <div class="middle"> <h2 data-color="" data-line-color="">Наше маленькое счастье</h2> <span data-color=""></span> <a href="http://www.jezhora-family.ru/nashe-malenkoe-schaste" data-color="">смотреть</a> </div> </div> </div> <div class="chess-grid-image" data-width="1000" data-height="1345"> <div class="cell loaded" style="background-image: url(&quot;http://static1.gophotoweb.com/u4723/8066/photos/1234548/500-5e032321dca64d7ff7484c398b302c3c.jpg&quot;);"> </div> </div> </div> <div id="i568968" class="chess-grid-item text-hover" data-type="2x2" data-color="" data-href="http://www.jezhora-family.ru/morning-inspiration" style="width: 377px; height: 377px; top: 384px; left: 384px;"> <div class="chess-grid-text"> <div class="cell"> <div class="middle"> <h2 data-color="" data-line-color="">Morning.Inspiration.</h2> <span data-color="">Фотопроект "Утро невесты"</span> <a href="http://www.jezhora-family.ru/morning-inspiration" data-color="">Смотреть</a> </div> </div> </div> <div class="chess-grid-image" data-width="1000" data-height="1333"> <div class="cell loaded" style="background-image: url(&quot;http://static1.gophotoweb.com/u4723/8066/photos/568968/500-0029e4cfbe2351b2a6a8f00fce6cfcb1.jpg&quot;);"> </div> </div> </div> <div id="i1324812" class="chess-grid-item text-hover" data-type="2x2" data-color="" data-href="http://www.jezhora-family.ru/sasha-i-ilja" style="width: 377px; height: 377px; top: 768px; left: 0px;"> <div class="chess-grid-text"> <div class="cell"> <div class="middle"> <h2 data-color="" data-line-color="">Саша и Илья</h2> <span data-color="">Франция, Нормандия<br> Этрета</span> </div> </div> </div> <div class="chess-grid-image" data-width="1000" data-height="747"> <div class="cell loaded" style="background-image: url(&quot;http://static1.gophotoweb.com/u4723/8066/photos/1324812/1000-32e09e4a7b51ea5788e3d7b8af63d612.jpg&quot;);"> </div> </div> </div> <div id="i1151178" class="chess-grid-item text-hover" data-type="2x2" data-color="" data-href="http://www.jezhora-family.ru/kat-i-denis" style="width: 377px; height: 377px; top: 768px; left: 384px;"> <div class="chess-grid-text"> <div class="cell"> <div class="middle"> <h2 data-color="" data-line-color="">Катя и Денис</h2> <span data-color="">Минск 2015</span> <a href="http://www.jezhora-family.ru/kat-i-denis" data-color="">Смотреть</a> </div> </div> </div> <div class="chess-grid-image" data-width="1000" data-height="1345"> <div class="cell loaded" style="background-image: url(&quot;http://static1.gophotoweb.com/u4723/8066/photos/1151178/500-68973cd3cd3793a4ba8efd023af49609.jpg&quot;);"> </div> </div> </div>

2 answers 2

Thank you all very much, I managed, I added this code to the beginning, which was missing:

 <style> .desc {max-width: 900px; margin-left: auto; margin-right: auto;} .chess-grid {max-width: 802px; margin: 0 auto;} </style>

    Try this block in which your thumbnails are lying, give

     margin: 0 auto;