<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%.
Вы бы, блин, лучше были мастером по нормальному составлению вопроса. Где полный код? Кто и что должен по этому обрубку понять? Никто не будет гадать, что там у вас за проблема из миллиона возможных вариантов.