How to set width of mega menu dropdowns?

Hello,
As my products increased, i am trying to change the top menu into mega menu, with 3 columns and mega menu autowidth (The mega menu dropdown width would be the same as top menu from left to right, which’s too much wide than i expecetd, so i set the mega menu autowidth).

When i completed the setting, i find the dropdowns are not in proper width, every item will not show itself in one line. So i use the CSS code found in this article https://www.ads-software.com/support/topic/changing-the-width-of-dropdown-menu/

The CSS code i added in customizer is:

.sf-menu li.menu-item {
    white-space: nowrap !important;
}

This code does not work properly in my site, please check on the screenshot here:
https://ibb.co/pxn3MQy

1) I found the 1st item has no border in left;
2) Text of some items cross the right column border;
3) If the total items can not be seperated into 3 columns evenly, there will always have a blank area in the last column bottom part WITHOUT left border.

I also tried with Customizer-Header-Menu-Dropdown Styling Width, which is now 300px, it effects the normal menu dropdown width but NOT the MEGA menu dropdown.

Please kindly help me out.
Thank you so much.