css - макет div в виде таблицы

Question

У меня возникли проблемы с форматированием моей галереи html 3x3, созданной с помощью div. Вот как это выглядит сейчас:

http://codepen.io/makkam121/pen/EisKd

.gallery { 
 
    width: auto; 
 
    margin: 50px auto; 
 
    padding: 10px; 
 
    border: 2px solid black; 
 
} 
 
.gallery_row { 
 
    margin: 10px 10px 10px 0px; 
 
    width: auto; 
 
} 
 
.gallery_image { 
 
    width: auto; 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
} 
 
img { 
 
    border: 2px solid black; 
 
    padding: 10px; 
 
    background-color: #BBAABB; 
 
}

<div class="gallery"> 
 
    <div class="gallery_row"> 
 
    <div class="gallery_image"> 
 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt=""> 
 
    </div> 
 
    <div class="gallery_image"> 
 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt=""> 
 
    </div> 
 
    <div class="gallery_image"> 
 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt=""> 
 
    </div> 
 
    </div> 
 
    <div class="gallery_row"> 
 
    <div class="gallery_image"> 
 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt=""> 
 
    </div> 
 
    <div class="gallery_image"> 
 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt=""> 
 
    </div> 
 
    <div class="gallery_image"> 
 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt=""> 
 
    </div> 
 
    </div> 
 
    <div class="gallery_row"> 
 
    <div class="gallery_image"> 
 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt=""> 
 
    </div> 
 
    <div class="gallery_image"> 
 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt=""> 
 
    </div> 
 
    <div class="gallery_image"> 
 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt=""> 
 
    </div> 
 
    </div> 
 
</div>

Я хочу, чтобы галерея выровнять по центру страницы автоматически, как количество изображений в строке может изменяться. Вместо этого я получаю div с огромным правым краем, достигающим правого края страницы. Кроме того, я хочу, чтобы расстояние между элементами и внешней границей было равным (они не ...).

Что я делаю неправильно? Буду признателен за любую помощь.

Answer 1

http://codepen.io/anon/pen/mgqeJ

.gallery{ 
    width:auto; 
    margin: 0auto; 
    width:100%; 
    text-align:center; 
    border:2px solid black; 

} 
.gallery_row{ 
    margin:2%; 
    width:auto;  
} 
.gallery_image{ 
    width:auto; 
    display:inline-block; 
    margin:2% 5% 2% 5% 
} 
img { 
    border:2px solid black; 
    padding:20%; 
    background-color:#BBAABB; 
}