Hi, I am having a problem with one of of my email templates

I cannot get the footer to display correctly with nearly all the Outlook and Gmail clients, as the social media icons don't sit ontop of the footer image.

And also the middle section is displaying wider than the header and footer (which I have set to 600px)

It opens up fine in my browser Google Chrome which is how I want it to display.

If anyone can offer any advise as to what I am doing wrong that really would be much appreciated. I have tried various web kits and [if gte mso 9]'s etc however nothing is working.

I have pasted my code below if it helps


<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
        <title>BBC Children in Need</title>
        <style type="text/css" v\:* { behavior: url(#default#VML); display: inline-block; } >
        </style>
    </head>


    <body>

<!---------- HEADER ---------->     

        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="600" class="responsive-table">
                        <tr>
                            <td>
                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                    <tr>
                                        <td>
                                            <a target="_blank" href="https://www.bbcchildreninneed.co.uk/fundraisinghub"><img src="http://ccm.proco.com/bbccin13-02-18/header.jpg" border="0" class="responsive-image" style="display: block;"></a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>   
        </table>




<!---------- NAV BAR ---------->        

        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="600" class="responsive-table">
                        <tr>
                            <td>
                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                    <tr>
                                        <td style="background-color: #ffcf20;" class="responsive-text">
                                            <p style="margin: 10px 10px 10px 10px; font-family: Arial, sans-serif; font-size:14px; font-weight:bold; text-align:right;">
                                            <a target="_blank" style="color:black; text-decoration: none; "href="https://www.bbcchildreninneed.co.uk/fundraisinghub/fundraisingtools">Fundraising</a> | 
                                            <a target="_blank" style="color:black; text-decoration: none;" href="http://www.bbc.co.uk/programmes/articles/psvxkB6QDMK63pgHmP5RJF/who-you-help">Who you help</a> | 
                                            <a target="_blank" style="color:black; text-decoration: none;" href="https://www.bbcchildreninneedshop.co.uk/">Shop</a> | 
                                            <a target="_blank" style="color:black; text-decoration: none;" href="http://www.bbc.co.uk/programmes/articles/23RHk0CVyXWFwHDBBVkT7h5/donate-or-pay-in-your-fundraising-money">Donate</a></p>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>   
        </table>




<!---------- HEADLINE ---------->

        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="600" class="responsive-table">
                        <tr>
                            <td>
                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                    <tr>
                                        <td>
                                            <img src="http://ccm.proco.com/bbccin13-02-18/headline-copy-with-text.jpg" class="responsive-image" style="border-top:3px solid black; border-bottom:3px solid black; display: block;">
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>   
        </table>




<!---------- MID SECTION ---------->

        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="600" class="responsive-table">
                        <tr>
                            <td>
                                <table border="0" cellpadding="0" cellspacing="0" width="100%">

                                    <!-- First Row -->
                                    <tr>
                                        <td><img src="http://ccm.proco.com/bbccin13-02-18/blank-image.jpg" class="responsive-image" width="300px" height="450px" style="display: block;"></td>
                                        <td class="responsive-text-box" width="300" height="154px" style="background-color: #111; font-family: Arial, sans-serif; font-size: 13px; color: #fff; line-height: 135%; padding: 25px">
                                            <p>BBC Children in Need (and Pudsey in particular) are delighted to be joining forces again this year with the team at Gung-Ho!</p>
                                            <p>For those that don’t know, Gung-Ho! is a fun run like no other. The 5k course is open to all abilities - whether amateur, enthusiast or elite - and is packed with 10 giant inflatable obstacles, making for a truly unforgettable experience!</p>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                            <p style="font-weight: bold; color: #ffcf20;">So what are you waiting for?<br>Sign up here ></p>
                                        </td>
                                    </tr>


                                    <!-- Second Row -->
                                    <tr>
                                        <td class="responsive-text-box" width="300px" height="154px" style="background-color: #111; font-family: Arial, sans-serif; font-size: 13px; color: #fff; line-height: 135%; padding: 25px">
                                            <p>BBC Children in Need (and Pudsey in particular) are delighted to be joining forces again this year with the team at Gung-Ho!</p>
                                            <p>For those that don’t know, Gung-Ho! is a fun run like no other. The 5k course is open to all abilities - whether amateur, enthusiast or elite - and is packed with 10 giant inflatable obstacles, making for a truly unforgettable experience!</p>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                            <p style="font-weight: bold; color: #ffcf20;">So what are you waiting for? <br>Sign up here ></p>
                                        </td>
                                        <td><img src="http://ccm.proco.com/bbccin13-02-18/blank-image.jpg" class="responsive-image" width="300px" height="450px" style="display: block;"></td>
                                    </tr>

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

    </body>




    <footer>

<!---------- FOOTER ---------->

        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="600" class="responsive-table">
                        <tr>
                            <td>
                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                    <tr>
                                        <td style="position: relative; text-align: center; width:600px; height:172px;" colspan="4">
                                            <img src="http://ccm.proco.com/bbccin13-02-18/footer.jpg">
                                            <p style="font-family: Arial, sans-serif; font-size: 9px; line-height: 13px; position: relative; text-align: center; bottom: 4px; width: 100%; top:-75px">If you no longer wish to receive BBC Children in Need updates, please click the link below to unsubscribe.<br/>BBC Children in Need is a registered charity England and Wales no 802052 and SC039557 in Scotland.<br/>BBC, BBC Children in Need and Pudsey Bear are registered trademarks of the BBC.</p>
                                            <table border="0" cellpadding="0" cellspacing="0" style="width: 175px; margin: 0 auto; top-50px">
                                                <tr>
                                                    <td><a href="http://https://www.facebook.com/bbcchildreninneed"><img src="http://ccm.proco.com/bbccin13-02-18/fb-icon.png" style=" position: relative; top:-190px; width: 35px"/></a></td>
                                                    <td><a href="https://twitter.com/bbccin"><img src="http://ccm.proco.com/bbccin13-02-18/tw-icon.png" style=" position: relative; top:-190px; width: 35px"/></a></td>
                                                    <td><a href="https://www.youtube.com/user/BBCCiN"><img src="http://ccm.proco.com/bbccin13-02-18/yt-icon.png" style=" position: relative; top:-190px; width: 35px"/></a></td>
                                                    <td><a href="https://www.instagram.com/bbccin/"><img src="http://ccm.proco.com/bbccin13-02-18/in-icon.png" style="position: relative; top:-190px; width: 35px"/></a></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>   
        </table>




    </footer>



</html>