Why does my media queries not work even when it is written correctly

I am trying to set the media queries in my footer class but for some reason its not working.

Am running the server with Laravel 5 but am not sure that's what is causing this.

Here are the codes:

HTML & CSS

.footer{
    background-color:rgba(40, 50, 60, 1);
    height: 200px;
}

/* MEDIA QUERIES */

/* if screen width goes above 450px do this */
@media only screen and(min-width: 450px)
{
    /* make the color red */
    .footer{
        background-color: red!important;
    }
}

<div class="footer d-flex justify-content-center">
  <span class="font-md text-light">Footer</span>
</div>

via Chebli Mohamed