Hi guys am really having a problem will be cool if i got help with

i am new with email coding my background is UI designer

evry time trying to do some sections with more than one column get something wrong to make it Responsive on the others screns

something like

the media query that i used
>  @media screen and (max-width: 600px), screen and (max-device-width: 600px) {
>         table[class="responsive-table"]{width:100%!important;}}
>       @media screen and (max-width: 350px), screen and (max-device-width: 350px) {
>         td[class="mobile-width"]{padding: 0 3% !important;}
>     }
and my table is
> <!-- start table -->
>           <table class=" responsive-table editable-bg-color bg_color_cee3f4 editable-bg-image" mc:repeatable="castellab" mc:variant="Header" cellspacing="0" cellpadding="0" align="center" border="0" width="100%" height="594" bgcolor="#cee3f4"  style="background-image: url(#); background-position: top center; background-repeat: no-repeat; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" background="#">
> 
>               <tr>
>                   <td height="44" style="font-size: 6px; line-height: 6px;">&nbsp;</td>
>               </tr>
> 
>               <!-- navbar -->
> 
>               <tr height="80">
>                   <td>
> 
>                       <!-- start navbar -->
>                       <table class="responsive-table" class="editable-bg-color bg_color_cee3f4 editable-bg-image" mc:repeatable="castellab1" mc:variant="Header1" cellspacing="0" cellpadding="0" align="center" border="1" width="600" height="80" bgcolor="#cee3f4"  style="border:5px solid #ffffff; background-image: url(#); background-position: top center; background-repeat: no-repeat; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" background="#">
> 
>                           <tr align="center">
> 
>                               <td width="35" style="font-size: 6px; line-height: 6px;">&nbsp;</td>
> 
>                               <td class="" >
>                                   <table class="responsive-table mobile-width" align="center" class="four columns"  border="0" cellpadding="0" cellspacing="0" width="100%">
>                                       <tr >
>                                           <td class="tedc-logo">
> 
>                                               <a href="#" style="border-style: none !important; display: block; border: 0 !important;" class="editable-img">
>                                               <img  class="" editable="true" mc:edit="image001" src="/castellab/blackfriday/elements-images/logo.png" style="display:block; line-height:0px; font-size:0px; border:0px;  alt="iPhone" " />
>                                               </a>
>                                   
>                                           </td>
>                                            
>                                       </tr>
>                                   </table>
>                               </td>
> 
>                               
>                               <td width="306">
> 
>                                   <!-- start table -->
>                                   <table class="responsive-table mobile-width " cellspacing="0" cellpadding="0" align="left" border="0" width="100%"  style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" >
> 
>                                       <tr>
> 
>                                           <td>
>                                               <table class="responsive-table" border="0" cellpadding="0" cellspacing="0" width="100%">
>                                                   <tr>
>                                                       <td mc:edit="text001" align="left" style="color: #282828; font-size: 18px; font-family: 'Raleway', Calibri, sans-serif; font-weight: 400; mso-line-height-rule: exactly; line-height: 36px;" class="text_color_282828">
>                                                           <div class=" editable-text" style="line-height: 36px;">
>                                                               <span class="text_container">
>                                                                   <multiline>
>                                                                       <a href="#"style="text-decoration: none; color: #282828;">Home</a>
>                                                                   </multiline>
>                                                               </span>
>                                                           </div>
>                                                       </td>
>                                                   </tr>
>                                               </table>
>                                               
>                                           </td>
> 
>                                           <td>
>                                               <table  border="0" cellpadding="0" cellspacing="0" width="100%">
>                                                   <tr>
>                                                       <td mc:edit="text002" align="left" style="color: #282828; font-size: 18px; font-family: 'Raleway', Calibri, sans-serif; font-weight: 400; mso-line-height-rule: exactly; line-height: 36px;" class="text_color_282828">
>                                                           <div class="editable-text" style="line-height: 36px;">
>                                                               <span class="text_container">
>                                                                   <multiline>
>                                                                       <a href="#"style="text-decoration: none; color: #282828;">Shop</a>
>                                                                   </multiline>
>                                                               </span>
>                                                           </div>
>                                                       </td>
>                                                   </tr>
>                                               </table>
>                                           </td>
> 
>                                           <td>
>                                               <table  border="0" cellpadding="0" cellspacing="0" width="100%">
>                                                   <tr>
>                                                       <td mc:edit="text003" align="left" style="color: #282828; font-size: 18px; font-family: 'Raleway', Calibri, sans-serif; font-weight: 400; mso-line-height-rule: exactly; line-height: 36px;" class="text_color_282828">
>                                                           <div class="editable-text" style="line-height: 36px;">
>                                                               <span class="text_container">
>                                                                   <multiline>
>                                                                       <a href="#"style="text-decoration: none; color: #282828;">Features</a>
>                                                                   </multiline>
>                                                               </span>
>                                                           </div>
>                                                       </td>
>                                                   </tr>
>                                               </table>
>                                           </td>
> 
>                                           <td>
>                                               <table border="0" cellpadding="0" cellspacing="0" width="100%">
>                                                   <tr>
>                                                       <td mc:edit="text004" align="left" style="color: #282828; font-size: 18px; font-family: 'Raleway', Calibri, sans-serif; font-weight: 400; mso-line-height-rule: exactly; line-height: 36px;" class="text_color_282828">
>                                                           <div class="editable-text" style="line-height: 36px;">
>                                                               <span class="text_container">
>                                                                   <multiline>
>                                                                       <a href="#"style="text-decoration: none; color: #282828;">Contact</a>
>                                                                   </multiline>
>                                                               </span>
>                                                           </div>
>                                                       </td>
>                                                   </tr>
>                                               </table>
>                                           </td>
>                                       </tr>
> 
>                                   
>                                   </table>
>                                   <!-- end  table -->
> 
>                               </td>
> 
>                               <td width="35" style="font-size: 6px; line-height: 6px;">&nbsp;</td>
> 
>                           </tr>
> 
>                           
>                       
>                       </table>
>                       <!-- end  table -->
>                   </td>
>               </tr>
> 
>               <tr>
>                   <td height="58" style="font-size: 6px; line-height: 6px;">&nbsp;</td>
>               </tr>
> 
>               <!-- Slide -->
> 
>               <tr>
>                   <td>
>                       <table class="tresponsive-table" align="center" height="410" border="0" cellpadding="0" cellspacing="0" width="600">
>                           <tr>
> 
>                               <td>
>                                   <table class="responsive-table" border="0" cellpadding="0" cellspacing="0" width="300">
> 
>                                       <tr>
>                                           <td mc:edit="text005" align="left" style="color: #282828; font-size: 40px; font-family: 'Raleway', Calibri, sans-serif; font-weight: 900; mso-line-height-rule: exactly; line-height: 36px;" class="text_color_282828">
>                                               <div class="fadeInDown editable-text" style="line-height: 56px;">
>                                                   <span class="text_container">
>                                                       <multiline>
>                                                           <a href="#"style="text-decoration: none; color: #282828;">
>                                                               BLACK FRIDAY <br>Best Of Market
>                                                           </a>
>                                                       </multiline>
>                                                   </span>
>                                               </div>
>                                           </td>
>                                       </tr>
> 
>                                       <tr>
>                                           <td height="30" style="font-size: 6px; line-height: 6px;">&nbsp;</td>
>                                       </tr>
> 
>                                       <tr>
>                                           <td mc:edit="text001" align="left" style="color: #0144a1; font-size: 24px; font-family: 'lato', Calibri, sans-serif; font-weight: 400; mso-line-height-rule: exactly; line-height: 36px;" class="text_color_0144a1">
>                                               <div class="fadeInDown2 editable-text" style="line-height: 36px;">
>                                                   <span class="text_container">
>                                                       <multiline>
>                                                           <a href="#"style="text-decoration: none; color: #0144a1;">50% Desconto</a>
>                                                       </multiline>
>                                                   </span>
>                                               </div>
>                                           </td>
>                                       </tr>
> 
>                                       <tr>
>                                           <td height="30" style="font-size: 6px; line-height: 6px;">&nbsp;</td>
>                                       </tr>
> 
>                                       <tr>
>                                           <td>
>                                               <table width="144" border="0" cellspacing="0" cellpadding="0" align="left" class="">
>                                                                                                                   
>                                                   <tr>
>                                                       <td>
>                                                           <table width="100%" border="0" cellspacing="0" cellpadding="0" align="right"  style="border-radius: 0px; border:2px solid #282828;" class="button_bg_color_3">
>                                                               <tr>
>                                               
>                                                                   <td mc:edit="text007" align="center" style="color: #282828; font-size: 18px; font-family: 'Raleway', Calibri, sans-serif; font-weight: 600; mso-line-height-rule: exactly; line-height: 36px;" class="text_color_282828">
>                                                                       <div class="fadeInDown3 editable-text" style="line-height: 36px;">
>                                                                           <span class="text_container">
>                                                                               <multiline>
>                                                                                   <a href="#"style="text-decoration: none; color: #282828;">Shop now</a>
>                                                                               </multiline>
>                                                                           </span>
>                                                                       </div>
>                                                                   </td>
>                                               
>                                                               </tr>
>                                                           </table>
>                                                       </td>
>                                                   </tr>
>                                               
>                                               </table>
>                                           </td>
>                                       </tr>
> 
>                                   </table>
>                               </td>
> 
>                               <td >
>                                   <table class="responsive-table  fadeInDown " align="right"  border="0" cellpadding="0" cellspacing="0" width="300">
>                                       <tr>
>                                           <td>
>                                               <a href="#" style="border-style: none !important; display: block; border: 0 !important;" class="editable-img">
>                                               <img editable="true" mc:edit="image002" src="/castellab/blackfriday/elements-images/g1.png" style="display:block; line-height:0px; font-size:0px; border:0px; width="" border="0" alt="iPhone" " />
>                                               </a>
>                                           </td>
>                                       </tr>
>                                   </table>
>                               </td>
> 
>                           </tr>
>                       </table>
>                   </td>
>               </tr>
>   
>           </table>