overflow-x: скрыт, не работает на мобильном телефоне / сафари для полностраничного баннера в шаблоне страницы по умолчанию на веб-сайте, который я пытаюсь переопределить

Question

Я работаю над веб-сайтом, который размещен на веб-сайте более крупной организации, где я ограничен конкретным c шаблоном и стилем. Я попытался обойти шаблон, вставив специфику c CSS стилей в каждую отдельную страницу.

Я столкнулся с проблемой с созданным полностраничным баннером. Отрицательные поля были использованы для расширения фона в обоих направлениях. Он работает в Chrome и Firefox, но не в Safari и не на мобильных устройствах. Проблема в том, что баннер проходит за конец страницы (полоса прокрутки отсутствует, поскольку я установил overflow-x: hidden, но вы все равно можете переместить страницу влево - см. Изображение).

Пример на мобильном телефоне

Пример можно посмотреть здесь: careerfair.uwo.ca

Вот код I ' использую для баннеров:

<style><!--
.html, body {
  overflow-x: hidden;
}

.full-width-purple {

        background-color: #4F2683;
        padding: 2rem 0;
        margin: 0 -24vw;
        color: #ffffff;
    }
    
    .full-width-purple > .wrapper {
        width: 95vw;
        max-width: 1170px;
        margin: auto;
        color:#ffffff;
    }
  .full-width-purple h1,   .full-width-purple h2,   .full-width-purple h3,   .full-width-purple h4,   .full-width-purple h5,   .full-width-purple h6  {  
      color:#ffffff;
      line-height:2em;
  }
  
  .full-width-grey {

        background-color: #eeeeee;
        padding: 2rem 0;
        margin: 0 -24vw;
        color: #666666;
    }
    
    .full-width-grey > .wrapper {
        width: 95vw;
        max-width: 1170px;
        margin: auto;
        color:#666666;
    }
  .full-width-grey h1,   .full-width-grey h2,   .full-width-grey h3,   .full-width-grey h4,   .full-width-grey h5,   .full-width-grey h6  {  
      color:#666666;
      line-height:2em;
  }
  
--></style>

Я безуспешно пытался решить проблему следующими способами (в конечном итоге создает проблемы в представлении рабочего стола):

1. Позиция добавления: относительно тела и html
2. Обновление ширины до 100% и поля с полями: 0 auto в классе full-width-grey & full-width-purple.
3. Обновление оболочки class to width: 100% и margin: 0 auto

** многие из этих решений не работают, потому что шаблон страницы по умолчанию, который я пытаюсь переопределить, не отображает содержимое полностью область просмотра на рабочем столе (чуть ниже середины экрана).

Я думаю, мне нужно установить некоторые условия для отображения баннера на мобильных устройствах или экранах другого размера, но я не уверен, как это сделать. Любая помощь будет оценена.