Is it possible to do media queries on squarespace 7.1?

I'm trying to do a regular CSS media query with a basic HTML table using a .container class. This is pure HTML, CSS, and JS, no bootstrap. I seem to not be able to affect the width of the table.container. Is this a limitation on squarespace 7.1? Would I need to inject it through the site in order to do it? 

    /*Trying media queries to target small, and medium screens*/
    @media screen and (min-width: 400px) and (max-width: 600px) {
        .container {
            position: relative;
            left: 100px;
            width: 300px;
            height: 600px;
            position: relative;
            margin-bottom: 400px;

            background-size: contain;
            max-width: 100%;
            max-height: 100%;
        }
    }

    /*For a medium tablet*/
    @media screen and (min-width: 600px) and (max-width: 800px) {
        .container {
            position: relative !important;
            left: 100px !important;
            min-width: 300px !important;
            max-width: 300px !important;
            height: 600px !important;
            position: relative !important;
            margin-bottom: 400px !important;

            background-size: contain !important;
            max-width: 100% !important;
            max-height: 100% !important;
        }
    }

SS has also class name .container, so you need to add !important to override default CSS