Make Mega Menus appear full-width with this CSS.

Here is a link on how to extend mega-menus further. It has written for the Beaver Builder theme but can be applied to the Menu Module.

Here is the link  on to how to set up a mega-menu.

Here is a link to how the mega-menu can look (see "using BB").

* you may need to add extra selectors  (or !important) if not adding to styles.css in the BB theme.

UL.fl-menu-horizontal LI.mega-menu > UL.sub-menu:after
{
 content: "";
 display: block;
 position: absolute;
 left: 50%;
 top: -1px;
 height: 101%;
 width: 100vw;
 transform: translateX(-50%);
 z-index: -1;
 box-sizing: border-box;
 border-top: 1px solid #efefef; 
 background-color: #efefef;
 /* This is for full width shadow.
 You need to turn off "sub-menu drop shadow" in the menu module.
 Remove this if not needed. */
 -moz-box-shadow: -2px 4px 9px 0 rgba(134, 134, 134, 0.451);
 -webkit-box-shadow: -2px 4px 9px 0 rgba(134, 134, 134, 0.451);
 box-shadow: -2px 4px 9px 0 rgba(134, 134, 134, 0.451); 
}