.container {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: 0px;
    margin-left: 0px;
}

/************************/
/*  Min width 320px wide */
/************************/
/* The main container that everything fits into */
#ZonesContainer {
    width: 320px;
}

@media only screen and (min-width: 320px) {
    #ZonesContainer {
        width: 320px;
    }
}

.container{
    max-width:100%;
}
@media only screen and (min-width: 375px) {
    #ZonesContainer {
        width: 375px;
    }
}
@media only screen and (min-width: 390px) {
    #ZonesContainer {
        width: 390px;
    }
}
@media only screen and (min-width: 410px) {
    #ZonesContainer {
        width: 410px;
    }
}
@media only screen and (min-width: 480px) {
    #ZonesContainer {
        width: 480px;
    }
}
@media only screen and (min-width: 540px) {
    #ZonesContainer {
        width: 540px;
    }
}
@media only screen and (min-width: 576px) {
    .container {
        max-width: 100%;
    }
}
@media only screen and (min-width: 600px) {
    /* The main container that everything fits into */
    #ZonesContainer {
        width: 600px;
    }
}
@media only screen and (min-width: 700px) {
    /* The main container that everything fits into */
    #ZonesContainer {
        width: 700px;
    }
}
@media only screen and (min-width: 768px) {
    #ZonesContainer {
        width: 768px;
    }
}
@media only screen and (min-width: 992px) {
    #ZonesContainer {
        width: 992px;
    }
}
@media only screen and (min-width: 1200px) {
    #ZonesContainer {
        width: 1000px;
    }
}