Mega Menu display location

I have added the following CSS to make the mega menus narrower.

#main-nav li.megamenu.columns-3>ul { width: 60% !important }

It works great but now the menus are all displayed in the same place and don’t go under the nav menu item clicked. I have included a screenshot.

Ideally I would like it centered under the clicked item.

Thanks.

Peter