why my div keep on the side and wont center - html

Question

.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
<table align="center">
<tr>
<td align="center">
<div class="row">
<div class="column">
<img src="pics/photos/sample1.png">
<img src="pics/photos/sample2.png">
<img src="pics/photos/sample3.png">
</div>
<div class="column">
<img src="pics/photos/sample4.png">
<img src="pics/photos/sample5.png">
<img src="pics/photos/sample6.png">
</div>
<div class="column">
<img src="pics/photos/sample7.png">
<img src="pics/photos/sample8.png">
<img src="pics/photos/sample9.png">
</div>
</div>
</td>
</tr>
</table>
Someone maybe know why my div isn't go to the center and keep stay on the side?
No matter what I writing with margin or align it keep stay on the side (on the body CSS I've putted direction: rtl; if that matter.
HTML:
<table align="center">
<tr>
<td align="center">
<div class="row">
<div class="column">
<img src="pics/photos/sample1.png">
<img src="pics/photos/sample2.png">
<img src="pics/photos/sample3.png">
</div>
<div class="column">
<img src="pics/photos/sample4.png">
<img src="pics/photos/sample5.png">
<img src="pics/photos/sample6.png">
</div>
<div class="column">
<img src="pics/photos/sample7.png">
<img src="pics/photos/sample8.png">
<img src="pics/photos/sample9.png">
</div>
</div>
</td>
</tr>
</table>
CSS:
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
Thank you all for the help!

Answer 1

from what I can understand you want your "column" divs to be centered inside row div. I will suggest you to learn flex-box and grid which makes thing easier.
I have added only two lines of code in your ".row" class
1.display:flex
2.justify-content:center
Below is my solution.
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
display: flex;
justify-content: center;
}
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
<table align="center">
<tr>
<td align="center">
<div class="row">
<div class="column">
<img src="pics/photos/sample1.png">
<img src="pics/photos/sample2.png">
<img src="pics/photos/sample3.png">
</div>
<div class="column">
<img src="pics/photos/sample4.png">
<img src="pics/photos/sample5.png">
<img src="pics/photos/sample6.png">
</div>
<div class="column">
<img src="pics/photos/sample7.png">
<img src="pics/photos/sample8.png">
<img src="pics/photos/sample9.png">
</div>
</div>
</td>
</tr>
</table>