<meta name="viewport" content="width=device-width, initial-scale=1.0">
.<meta name="viewport" content="width=device-width, initial-scale=1.0">
.margin-left: -366px;
? Я понимаю, что это половина ширины, но зачем именно так выравнивать? Если это модальное, то почему relative? Обычно у модального делают обёртку на fixed/absolute, которая по ширине занимает 100% сайта, а уже внутри неё делают обертку контента, которая по середине выровнена. Кроме того, не задают так ширину, а делают max-width: 700px + width: 100%.
Хорошо, что нашли проблему в итоге.