Как центрировать полноразмерный div, вложенный в нецентральный родительский элемент?

Question

Это, кажется, необычная проблема, так как я не видел, чтобы кто-то еще спрашивал об этом. Я работал над сайтом, на котором есть липкая навигационная панель и выпадающее меню. У меня нет доступа к HTML, поэтому мне приходится использовать множество псевдоэлементов и некоторые jQuery, чтобы все было правильно.

Вот дилемма: из-за ограничений в CMS Платформа, я разбиваю этот шаблон на куски и снова собираю его вместе. Прямо сейчас это означает, что я взял один из макетов нижнего колонтитула, управляемого CMS, и добавил его к панели навигации заголовка, чтобы использовать его в качестве раскрывающегося списка мегаменю во всю ширину. Сначала это работало достаточно хорошо, но только с использованием position: fixed для правильного центрирования.

Несколько функций позже, панель навигации липкая, она изменяет размеры и отображает на go прокрутку и длинную историю короче говоря, мегаменю position: fixed выглядит как отдельный придаток, если смотреть дальше вниз по странице, выступая из середины области просмотра. Я думаю, что мне нужно решение position: absolute, чтобы привязать его к своим братьям Навбар. Но сосредоточить его на width: 100vw оказывается сложной задачей.

Когда я изменяю размер окна, оно разрывается влево и вправо и явно теряет свой центр. После осмотра я понимаю, что это вызвано тем, что элемент 100vw мегаменю "вложен" в примерно 1012 * элемент navbar, который произвольно размещен, а не по центру.

Я видел множество отличных ответов об абсолютном центрировании здесь, которые великолепны, но не говорят о проблеме центрирования большого absolute деления в маленьком relative родителе и поддержании центра при изменении размера, когда родитель не центрирован для начала. Есть ли способ обойти это? Спасибо, что посмотрели, если вы это сделали.

CSS:

/* Frankenmenu */
.Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2) .Header-nav-folder 
{
    padding: .65rem 0 0 0;
    box-sizing: border-box;
    visibility: hidden;
    margin-left: -432.5px;
    height: auto;
    width: 100vw;
    position: absolute;
    left: 50%;
    top: 3.05rem;
    letter-spacing: 0;
    line-height: 1.5rem;
    box-shadow: inset 0 .15rem .15rem -.10rem rgba(0, 0, 0, 0.1),
                      0 .05rem .25rem 0 rgba(0, 0, 0, 0.1);
}

/* Extend Frankenmenu hitbox */
.Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2) .Header-nav-folder::before 
{
  content: "";
  display: block;
  height: 1rem;
  position: relative;
  top: -.5rem;
  width: 100%;
}

/* Reveal on hover */
.Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2):hover .Header-nav-folder 
{
    visibility: visible;
}

/* Hide template menu on hover */
.Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2) .Header-nav-folder > a 
{
    display: none;
}

Сайт:

URL — http://www.brandyglows.com
P/W — 'temp'