Проблема с тенями и 100% шириной текучей среды

Я полировал страницу, которую я создал за последние день или два, и столкнулся с проблемой после использования box-shadow - я надеялся, что кто-нибудь прольет свет на простой способ исправить это .

Настройка: У меня есть div с несколькими свойствами, включая ширину, максимальную ширину и тень блока.

#mydiv {  
       width:100%;
       max-width:1200px;
       -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
       -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
       box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
}

Проблема: Свойство box-shadow добавляет 40 пикселей к ширине элемента div - по 20 пикселей с каждой стороны. Когда экран достаточно мал, чтобы контент попадал в атрибут ширины 100%, мы видим горизонтальную полосу прокрутки. Покопавшись в CSS, я обнаружил, что это произошло потому, что технически div был больше похож на width: 100% + 40px;

Что я пробовал: Я рассматривал возможность установки overflow: hidden в родительском div, но у меня есть набор минимальной ширины, который сделает контент недоступным. Я также пробовал использовать процентное значение для аргумента размера в CSS box-shadow - например, 1% - а затем установить ширину div на 98%, но CSS box-shadow, похоже, не принимает процент для своего размер. Я также рассматривал возможность использования javascript для проверки ширины браузера и затем соответствующего отображения или скрытия элемента box-shadow, но это не кажется оптимальным решением

. Должен быть более простой способ справиться с этим. Мысли?