Mega Menu with GeneratePress Blocks & Hook – Layout and Submenu Sty

I’m building a mega menu system using GeneratePress Premium, the Block Element (Hook) feature, and the standard WordPress menu system.
Here’s what I’m doing:
I have a top-level menu item (e.g., “Shop”) with the class has-mega-menu.

Under it, I add a submenu custom link labelled ##mega_menu_shop##, with the class mega-menu-item.

In the code snippets plugin, I use the walker_nav_menu_start_el filter to detect the title and replace it with:

php

<div class=”mega-menu-content”><?php do_action(‘mega_menu_shop’); ?></div>

The mega_menu_shop action calls a GeneratePress Block Element (Hook), which allows me to design the mega menu layout using containers, grids, and dynamic blocks visually.
The issue I’m facing:
The injected .mega-menu-content inherits default submenu styles from GeneratePress, which:

Restricts its width like a standard dropdown

Prevents proper centering and full-width display

Causes layout shifts or stacking issues

Despite trying several CSS approaches, I haven’t been able to override this behavior cleanly while preserving semantic structure and accessibility.
This is part of a scalable eCommerce project, and I plan to reuse this method for multiple menu items using different hook names. If possible, I’d really appreciate it if someone could take a quick look and help adjust the structure or CSS so the mega menu displays properly centered, responsive, and wide (e.g., max-width: 1200px).
Thanks so much.