> <style>
        @import url(http://fonts.googleapis.com/css?family=Roboto:300); /*Calling our web font*/
        /* Fixing the difference between clients - if only there was an E-mail Standards... */
        #outlook a { padding:0; }
        body{ width:100% !important; -webkit-text; size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; }
        .ReadMsgBody { width: 100%; }
        .ExternalClass {width:100%;}
        .backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
        table td {border-collapse: collapse;}
        .ExternalClass * {line-height: 115%;}
        /* End reset */
        /* These are our tablet/medium screen media queries */
        @media screen and (max-width: 630px){
        /* Display block allows us to stack elements */
            *[class="mobile-column"] {display: block;}                                                             /* mobile-stacker */
        /* Some more stacking elements */
            *[class="mob-column"] {float: none !important;width: 100% !important;}                                 /* mob-stacker */
        /* Hide stuff */
            *[class="hide"] {display:none !important;}                                                             /* abra */
        /* This sets elements to 100% width and fixes the height issues too, a god send */
            *[class="100p"] {width:100% !important; height:auto !important;}                                       /* kadabra */
        /* For the 2x2 stack */
            *[class="condensed"] {padding-bottom:40px !important; display: block;}                                 /* alakazam */
        /* Centers content on mobile */
            *[class="center"] {text-align:center !important; width:100% !important; height:auto !important;}    /* ice-beam */
        /* 100percent width section with 20px padding */
            *[class="100pad"] {width:100% !important; padding:20px;}                                               /* fire-blast */
        /* 100percent width section with 20px padding left & right */
            *[class="100padleftright"] {width:100% !important; padding:0 20px 0 20px;}                             /* solar-beam */
        /* 100percent width section with 20px padding top & bottom */
            *[class="100padtopbottom"] {width:100% !important; padding:20px 0px 20px 0px;}                         /* hyper-beam */



        }



    </style>

    <style>

    <!--[if (gte mso 9)|(IE)]>

            /* This sets elements to 100% width and fixes the height issues too, a god send */
            *[class="OutlookNoob"] {height:0px !important; height:auto; display: none !important;}                     /* Hide Grey banner in Outlook IA */   

        <![endif]--> 

    </style>
    ```

    Though this hasnt done a single thing to hide the header which has a class of 'OutlookNoob'. 

    I have uploaded the html file here too so you can see the source: http://muhammadkasimali.co.uk/ZurbFoundation/

    Its working fine in every other client, in outlook there will have to be some sort of workaround which is why I am asking the above...

    hope someone can help...