How do I center a full-width div nested in an off-center parent div?

Site URL: http://www.brandyglows.com

Hello, everyone!

This seems to be an unusual problem, as I haven't seen anyone else ask about it. I've been working on a site which features a sticky navbar and a mega menu dropdown. I don't have access to the HTML, so I'm having to use a lot of pseudo elements and some jQuery to get things right.

Here's the dilemma: due to limitations in the CMS platform, I'm breaking this template into pieces and putting it back together again. Right now, that means I've taken one of the CMS-managed footer layouts and appended it to the header navbar to be used as a dropdown for a full-width mega menu. This worked well enough at first, but only using position: fixed to get the centering right.

A few features later, the navbar is sticky, it resizes and displays a logo on scroll, and long story short, the position: fixed mega menu looks like a detached appendage when viewed further down the page, jutting out of the middle of the viewport. I am thinking I need a position: absolute solution, to tether it back to its navbar brethren. But centering it at width: 100vw is proving to be a challenge.

When I resize the window, it gaps left and right, and clearly loses its center. After poking around, I'm realizing that it's caused by the 100vw mega menu div being "nested" inside a roughly 30px navbar element which is arbitrarily placed, and not centered.

I've seen plenty of great answers to absolute centering here, which are brilliant, but don't speak to the problem of centering a large absolute div in a small relative parent, and maintaining center on resize when the parent is not centered to begin with. Is there a way around this? Thanks for having a look, if you did so.

The 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;
}

The site:

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