Почему футер уезжает?
это нормальное проявление, учитывая что страница не адаптивная и она масштабируется
Футер состоит из двух частей фиксированной ширины 350 + 200 пикселей. В итоге 550. При меньшем разрешении правому некуда деваться. 
1) Плохое решение: .copyrights = 60%
.contacts = 30% (margins, etc.)
2) Решение по-лучше:@media screen and (max-width: 550px) {
    .copyrights {
        width: 100%;
    }

    .contacts {
        width: 100%;
    }
}