Mega Menu Dropdown Width

Question

I had a menu bar on which there was a whole series: Before the image of the website .

I wanted the menu to be between the logo and the shopping cart. I solved this by following these steps:

I added this CSS:

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 600px) { 
    .navbar-header { width:100%} 
}

and changed the original sequence in the html code:

<div class="navbar-header">
if(th_is_woocommerce_activated()) // Shopping cart
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">

to

<div class="navbar-header">
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
if(th_is_woocommerce_activated()) // Shopping cart

This partly solved the problem. But the Mega-menu is extremely small both on the desktop and in mobile mode. The website is here: Website .

I would like dropmenu to get the same width as in the picture. But I can not figure out where to set the width?

Answer 1

, , flex, , .

.mega-sub-menu {
   width: 1200px;
   position: absolute;
   left: -200px;
}

...

.

ftp flex-box. .

Answer 2

display:flex, header .container, . , .

.container>.navbar-header {
    position: absolute;
    top: 0;
    left: 160px;
}
.container>.navbar-collapse {
    margin-top: 85px;
    margin-left: 75px;
}
.themo_cart_icon {
    position: absolute;
    top: 0;
    right: 160px;
}