Simple CSS. Customizing menu not working

Hello,

So, I tried to implement a two column menu into my wordpress, using this CSS code which I’ve found on the internet:

.sub-menu-columns .sub-menu{
  display:inline-block; 
  width:500px !important;
  background-color:#FFFFFF;  
} 
.sub-menu-columns .sub-menu li{
  width:50% !important;  
}
.sub-menu-columns .sub-menu li a:hover{
  color:#FFFFFF;
}
.sub-menu-columns .sub-menu li:nth-child(even){
  float:right;
  border-left:2px;
  border-color: #404040;
}

I added .sub-menu-columns as a CSS class for the top-level-menu “Products” at which only!! the two column sub menu should be seen.

I managed to get this to work. Now is the problem, since the menu is bigger in width, that I need to move the sub-menu container to the left. I also managed to solve this issue with this code:

#mainnav ul li ul{
	left:-400px;
}

Now is the only thing, that all other Menus with submenus are moved to the left too (as you can see with “Contact/Support”)

My logical approach would be to edit the previous code to:

#mainnav .sub-menu-columns .sub-menu ul li ul{
	left:-400px;
}

However that is not working.
Any ideas maybe?
Website: https://xs-sol.com/