css - div's layout as a table - html

Question

I am having problems with formatting my html 3x3 gallery created with div's. Here is how it looks like now:
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>
I want the gallery to align to the center of the page automatically as the number of images in a row may vary. Instead, I am getting a div with a huge right margin reaching to the right edge of the page. And additionally, I want the spacing between the items and the outer border to be equal(they're not...).
What am I doing wrong? I would appreciate any help.

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;
}