Media query doesn't work when i resize screen less than 600px

Question

I have made a table under a division and used the media query to react it as responsive when screen size goes less than 600px. But when I resize my windows less than 600px all the content under table data is come out of the division. Here is the screenshot of my problem:

And here is my code that I have used to make this table:

<div class="myfirst">
        <h1 class="myheading">About Us</h1>
        <table>
            <tr>
                <td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td>
                <td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td>
                <td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td>
            </tr>
        </table>
    </div>
<style>
.myfirst {
    width: 100%;
    height: 200px;
    background-color: aqua;
    margin-top: 0;
}

.myheading {
    margin-top: 0px;
    text-align: center;
    font-family: sans-serif;
}

table {
    color: black;
    padding: 25px 196px;
    font-weight: 30;
    margin-left: 75px;
}

tr {
    width: 318px;
    height: 29px;
}

td {
    border-right: 2px solid white;
    padding: 0 32px;
}

td:last-child {
    border: none;
}

@media screen and(max-width:600px) {
    .myfirst {
        width: 100%!important;
        height: 200%;
        background-color: aqua;
        margin-top: 0;
    }
    table,td,tr,span {
        float: left;
        clear: both;
        width: 100%;
        display: block;
        margin: 0px;
        padding: 0;
    }


</style>

Answer 1

use @media screen and (max-width:600px) Add a space between and and (max-width:600px)

 .myfirst { width: 100%; height: 200px; background-color: aqua; margin-top: 0; } .myheading { margin-top: 0px; text-align: center; font-family: sans-serif; } table { color: black; padding: 25px 196px; font-weight: 30; margin-left: 75px; } tr { width: 318px; height: 29px; } td { border-right: 2px solid white; padding: 0 32px; } td:last-child { border: none; } @media screen and (max-width: 800px) { table,td,tr,span { margin-left: 0px!important; padding: 0; } } @media screen and (max-width: 600px) { .myfirst { width: 100%!important; height: 200%; background-color: aqua; margin-top: 0; } table,td,tr,span { float: left; clear: both; width: 100%; display: block; margin-left: 0px!important; padding: 0; } } 

 <div class="myfirst"> <h1 class="myheading">About Us</h1> <table> <tr> <td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td> <td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td> <td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td> </tr> </table> </div>