padding still active on small screen - html

Question

I am using tables because I am making a newsletter for emails. I have a picture, where I would like some padding on desktop screen. When a person is on a mobile, there should not be any padding on the picture. The following code works for the dekstop, but when I resize my window I still have a padding on the picture, even if I set it to 0px.
Can anybody see why that is happening?
.img-position {
padding: 40px 0px 40px 0px;
}
#media only screen and (max-width: 596px) {
.img-position {
padding: 0px 0px 0px 0px;
}
}
<!-- Top Picture Start -->
<table class="row background-color__blue">
<tr>
<td class="center img-position" align="center">
<center>
<table class="container">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td>
<img width="580" height="300" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<!-- Top Picture End -->

Answer 1

The answer is:
#media only screen and (max-width: 596px) {
td.img-position {
padding:0px 0px 0px 0px;
}
}

Answer 2

The #media rule with padding changing due to desktop width change works fine for me. If you want to remove any padding of table, try to add extra css rules like in the example below (the img must be set to display:block to remove the bottom empty space). I've added yellow background to make the effect more visible.
.img-position {
padding:40px 0px 40px 0px;
}
#media only screen and (max-width: 596px) {
.img-position {
padding:0px 0px 0px 0px;
}
}
img{
display:block;
}
table{
border-collapse:collapse;
}
table *{
padding:0px;
margin:0px;
}
<!-- Top Picture Start -->
<table class="row background-color__blue" style='background-color:yellow'>
<tr>
<td class="center img-position" align="center">
<center>
<table class="container">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td>
<img width="580" height="300" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<!-- Top Picture End -->