mega menu issue

Hi

I am using Storefront theme & Mega Menu.

I have the Logo centered, then the MAIN MENU underneath with background colour right across, with white text, centered etc.
I need it to be full width from left to right which seems to be difficult to achieve for me…

As the Storefront theme I need to MOVE the menu underneath the logo, getting the positioning correct for the Mega Menu has been a bit painful.

The coding I did to rectify to get the Mega MENU (Main Menu) to display full width nearly with custom CSS coding is:

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    margin-top: 0px;
    padding-right: 40px !important;
    color: #fff;
}
#mega-menu-wrap-primary #mega-menu-primary {
    visibility: visible;
    text-align: center;
    padding: 0px 0 0px 0;
    height: 40px !important;
    background-color: #222 !important;
margin-top: 40px;
	width: 160% !important;
    margin-left: -10% !important;
    margin-right: -32% !important;
}

Has someone got some advice you can offer on HOW I can get things displaying properly on PC .. (15″ laptop and 24″ LCD)

It’s working with that coding but each time I click on a menu item, the screen flashes slightly whilst loading, and whole menu moves to the right briefly before going back to where it should be …

Thanks in advance

Regards
Kristin