Hello guys, I am having some issues when making my design responsive once again. What happens is that when I set a padding to the image the table around the image and text gets a strange sizing.

I will post the simple html here plus an image so you can visualize better. Could you give me any pointers on how to solve this?

Once again, thank you for reading and for the help.

Responsive

    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="format-detection" content="telephone=no"> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
    <title>Template Latitudes</title>

        <style type="text/css">

            /*better image resizing when rendering in IE*/
            img {
                -ms-interpolation-mode: bicubic;
            }

            table {
                border-collapse: collapse;
            }           


            /*styles for phones and tablets*/
            @media screen and (max-width: 480px) {

                table[class="wrapper"] {
                    width: 100% !important;
                }

                td[class="stack"] {
                    width: 100% !important;
                    display: block !important;
                }

                td[class="text"] {
                    width: 100% !important;
                    display: block !important;
                    text-align: center !important;
                    padding: 0 !important;
                }


                img[class="responsive-img"] {
                    width: 100% !important;
                    height: auto !important;
                    padding: 8px;
                }
            }

        </style>

    </head>

    <body style="margin: 0; padding: 0;">

        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
            <tr>
                <td>

                    <table width="720" align="center" cellpadding="0" cellspacing="0" border="0" class="wrapper">
                        <tr>
                            <td>

                                <!--highlight 1-->
                                <table width="720" bgcolor="#33CCFF" cellpadding="0" cellspacing="0" border="0" class="wrapper">
                                    <tr>
                                        <td width="360" class="stack">
                                            <img src="http://placehold.it/360x240" alt="" width="360" style="display: block; border: 0; outline: 0;" class="responsive-img">
                                        </td>

                                        <td width="360" style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 24px; color: #94825d; font-style: italic; text-align: left; line-height: 32px; padding: 32px 32px 32px 32px" class="text">
                                        <i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, in, possim</i>
                                        </td>
                                    </tr>
                                </table>
                                <!--highlight 1-->

                            </td>
                        </tr>
                    </table>

                </td>
            </tr>
        </table>

    </body>
    </html>