Почему не работает @media в gulp?
Они работаю как и положено. Для .container который находится в .container
И ещё если указываешь media screen and (min-width: value), то нужно ставить от меньшего значения к большему.
У вас лишний вложенный контейнер. CSS препроцессоры очень упрощают код:

.container {
    max-width: 1170px;

    @media screen and (min-width: 576px) {
        max-width: 540px;
    }
}