Hi there!

HOW DO I MAKE MY CODE LOOK NICE IN HERE?!

So I've been driving myself crazy on how to figure this out but I have no more ideas. Basically I have a social media and subscription footer, on a screen smaller than 600px the subscription part should be below the social media icons.

This does work on firefox when I shrink the screen, however on iOS for some reason this is not working, I have tried a few changes but no combination I've tried seems to do the job. Here's my code:

> <html xmlns="http://www.w3.org/1999/xhtml">
> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
> <head>
>   <title>New York State</title>
>   
>       <style type="text/css">
>       
>           img {
>               margin-left: 20px;
>           }
>           body {
>           font: 100%/1.4 Arial, Helvetica, sans-serif;
>           background-color: #FFFFFF;
>           margin: 0;
>           padding: 0;
>           color: #000;
>             font-size: 16px !important;
>           }
>           h1 {
>           color: #004586;
>           font-weight: bolder;
>           font-size: 17px;
>           }
>           h2 {
>           color: #004586;
>           font-weight: bolder;
>           font-size: 15px;
>           }
>           span {
>           color: white;
>           font-size: 16px;
>           font-weight: bold;
>           line-height: 144.5%;
>             font: 100%/1.4 Arial, Helvetica, sans-serif;
>           }
>           ul, li {
>           color: #004586;
>           }
>           ul {
>           margin-left:-25px;
>           }
>           .container {
>           width: 600px;
>           background-color: #FFFFFF;
>           border-collapse: collapse;
>           }
>           a img { 
>           border: none;
>           }
>           a:link {
>           color: #FFFFFF;
>           text-decoration: none;
>           }
>           a:visited {
>           color: #FFFFFF;
>           text-decoration: none;
>           }
>           a:hover {
>           color: #FFFFFF;
>           text-decoration: none;
>           }
>           a:active {
>           color: #FFFFFF;
>           text-decoration: none;
>           }
>           .header {
>           width: 100%;
>           background-color: #FFFFFF;
>           margin-top: 30px;
>           margin-right: auto;
>           margin-bottom: 15px;
>           margin-left: auto;
>           }
>           .textarea {
>           width: 100%;
>           background-color: #FFFFFF;
>           margin-bottom: 12px;
>           margin-right: auto;
>           margin-left: auto;
>           }
>           .footer {
>           width: 100%;
>           background-color: #FFFFFF;
>           padding-top: 10px;
>           padding-bottom: 10px;
>           margin: 0 auto;
>           }
>           @media only screen and (max-width: 600px) {
>               table[class="container"] {
>               width: 100% !important;
>               }
>               .header {
>               width: 100% !important;
>               }
>               .container {
>               width: 100% !important;
>               }
>               .textAreaT {
>               max-width: 100% !important;
>               width: 100% !important;
>               }
>               tr td{
>               display:block !important;
>               margin-left:auto;
>               margin-right: auto;
>               }
>               .centerTd {
>               width: 245px !important;
>               margin-left: auto !important;
>               margin-right: auto !important;
>               float:none !important
>               }
>               .rightImg {
>               margin-left:0 !important;
>               }
>               .leftText {
>               width:93% !important;
>               margin-top:0 !important;
>               }
>               .rightText
>               {
>               margin-left:10px !important;
>               }
>               table {
>               margin-left: auto !important;
>               margin-right: auto !important;
>               }
>               img {
>                   margin-left: 40px !important;
>                   margin-top:10px;
>               }
>               #facebook {
>                   margin-left:30% !important;
>               }
>               .250pxT {
>               width:250px !important;
>               }
>               .165pxT {
>               width:250px !important;
>               }
>               .textWidth {
>               width:550px !important;
>               }
>               span {
>                   margin-left:23%;    
>               }
>               .textTable {
>                   margin: 10px !important;
>                   width: 590px !important;
>               }
>               .bannerImg {
>                   height: 160px !important;
>                   margin-left: 60px !important;
>                   width: 400px !important;
>               }
>           }
>       </style>
>   </head>
>   <body>
>       <table align="center" class="container" style="margin-left: auto; margin-right: auto; width: 100%;">
>           <tbody>
>               <tr style="background-color: #EBEBEB; width: 900px; height: 145px;">
>                   <td class="" style="background-color:#EBEBEB">
>                       <table width="600" align="center" class="">
>                           <tbody>
>                               <tr>
>                                   <td class="" style="background-color:#EBEBEB">
>                                       <img width="350" height="131" class="bannerImg" src="http://img04.en25.com/EloquaImages/clients/NYSExecChamber/%7B77358d63-6463-4a04-a7f7-7ab35cf60349%7D_NYS_FULL_COLOR_GOVERNORS_LOCK_UP_CMYK.png" style="width: 350px; margin-left: 0;">
>                                   </td>
>                               </tr>
>                           </tbody>
>                       </table>
>                   </td>
>               </tr>
>               <tr>
>                   <td class="">
>                       <table width="600" align="center" class="textTable">
>                           <tbody>
>                               <tr>
>                                   <td style="font-size: 16px; font-family: arial,arial,sans-serif;border-style: none;" class="">
>                                       Dear <span class="eloquaemail">FirstName</span>,<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<br>
> <br> 
> 
>                                       Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. <br><br>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.<br> <br>
>                                   
>                                       Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, 
> imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.<br><br>Sincerely,<br><br><img class="" src="http://img04.en25.com/EloquaImages/clients/NYSExecChamber/%7ba711b490-6024-4ce3-8c7a-8c1b5d97df7d%7d_signature_%28002%29.jpg"><br>Governor Andrew M. Cuomo<br><br> 
>                                   </td>
>                               </tr>
>                           </tbody>
>                       </table>
>                   </td>
>               </tr>
>               <tr style="background-color: #2377B9; width: 900px; height: 69px;">
>                   <td class="" style="background-color:#2377B9">
>                       <table width="600" align="center">
>                           <tbody>
>                               <tr>
>                                   <!--[if !mso]><!-- -->
>                                   <td class="" style="background-color:#2377B9;">
>                                       <a href="https://www.facebook.com/GovernorAndrewCuomo/?elqTrack=true&elqTrackId=3D38746A33CA48B2B7287C27B15252F4&elqaid=<span class=eloquaemail>elqassetId</span>&elqat=<span class=eloquaemail>elqassetType</span>" data-targettype="webpage"><img class="" id="facebook" src="http://img04.en25.com/EloquaImages/clients/NYSExecChamber/%7Bf6e47e7b-33af-4dcd-88f2-62bb4a4dee0c%7D_facebook.png"></a>
>                                       <a href="https://twitter.com/NYGov?elqTrack=true&elqTrackId=A804F20D11C381AA56BE5516CBFE859E&elqaid=<span class=eloquaemail>elqassetId</span>&elqat=<span class=eloquaemail>elqassetType</span>" data-targettype="webpage" title="Twitter"><img class="" id="twitter" src="http://img04.en25.com/EloquaImages/clients/NYSExecChamber/%7B7bf439f9-cc4f-40e0-af11-8d06a107b758%7D_twitter.png"></a>
>                                       <a href="https://instagram.com/nygovcuomo?elqTrack=true&elqTrackId=1950C1E3AA7C23B6EE3CD81FA5A9E553&elqaid=<span class=eloquaemail>elqassetId</span>&elqat=<span class=eloquaemail>elqassetType</span>" data-targettype="webpage" title="Instagram"><img id="instagram" src="http://img04.en25.com/EloquaImages/clients/NYSExecChamber/%7B0145d5bf-2545-40e3-a9bf-692046fb1037%7D_instagram.png" class=""></a><br />
>                                   </td>
>                                   <!--<![endif]-->
>                                   <!--[if gte mso]>
>                                   <td style="background-color:#2377B9">
>                                       <a href="https://www.facebook.com/GovernorAndrewCuomo/" ><img src="http://img04.en25.com/EloquaImages/clients/NYSExecChamber/{f6e47e7b-33af-4dcd-88f2-62bb4a4dee0c}_facebook.png" /></a>
>                                   </td>
>                                   <td style="background-color:#2377B9">
>                                       <a href="https://twitter.com/NYGov" ><img src="http://img04.en25.com/EloquaImages/clients/NYSExecChamber/{7bf439f9-cc4f-40e0-af11-8d06a107b758}_twitter.png"/></a>
>                                   </td>
>                                   <td style="background-color:#2377B9; margin-right:50px">
>                                       <a href="https://instagram.com/nygovcuomo" ><img src="http://img04.en25.com/EloquaImages/clients/NYSExecChamber/{0145d5bf-2545-40e3-a9bf-692046fb1037}_instagram.png" /></a>
>                                   </td>
>                                   <![endif]-->
>                                   <td class="" style="margin-bottom:10px;">
>                                       <span><a style="color:#FFF" title="Unsubscribe" data-targettype="sysaction" href="http://s1680389219.t.en25.com/e/u?s=<eloqua type='emailfield' syntax='siteid'/>&elq=<eloqua type='emailfield' syntax='recipientid'/>">Unsubscribe</a> <span style="color:orange; margin:0 !important">|</span> <a style="color:#FFF" title="Subscribe" data-targettype="sysaction" href="http://s1680389219.t.en25.com/e/sl?s=<eloqua type='emailfield' syntax='siteid'/>&elq=<eloqua type='emailfield' syntax='recipientid'/>">Subscribe</a> <span style="color:orange; margin:0 !important">|</span>
>  <a style="color:#FFF" title="Privacy Policy" data-targettype="webpage" href="https://www.ny.gov/privacy-policy?elqTrack=true&elqTrackId=35720FD888451CFF4D4B07342A36E209&elqaid=<span class=eloquaemail>elqassetId</span>&elqat=<span class=eloquaemail>elqassetType</span>">Privacy Policy</a></span>
>                                   </td>
>                               </tr>
>                           </tbody>
>                       </table>
>                   </td>
>               </tr>
>           </tbody>
>       </table>
>   
> </body></html>

Has someone seen something like this? Any suggestions? Below is the link to the litmus last litmus test I ran in case it is useful:
https://litmus.com/pub/4b31908

Thanks in advance for any help I receive.