Hi, I am having a problem using media queries in my HTML email design.

At a normal screen width of 600px I want the text in my nav bar to be aligned to the right and display at 14px, which it does fine.. however at screen widths of 400px or less I want the text to be aligned to the center and display at 13px, which it doesn't seem to be doing.

Please see my code below.. if someone could advise on what I'm doing wrong that would be much apprciated.


<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">

            @media screen and (max-width: 600px) {

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

                img[class="responsive-image"] {
                    max-width: 100% !important;
                    height: auto !important;
                }

                td[class="responsive-text-box"] {
                    max-width: 100% !important;
                    height: auto !important;
                }

                li[class="responsive-list"] {
                    width: 100%;
                }

            }

            @media screen and (max-width: 400px) {

                p[class="responsive-text"] {
                    font-size: 13px; !important;
                    text-align: center; !important;
                }
            }
</head>

<body>
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td>
                    <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="#">Fundraising</a> | 
                                            <a target="_blank" style=" color:black; text-decoration: none;" href="#">Who you help</a> | 
                                            <a target="_blank" style=" color:black; text-decoration: none;" href="#">Shop</a> | 
                                            <a target="_blank" style=" color:black; text-decoration: none;" href="#">Donate</a></p>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>   
        </table>
</body>