I applied the fix using the above methods and its working fine on big screens but on smaller screens like laptops the menu is getting extended beyond the display area.
We can make it so the items open below the menu but you would need to change the sub menu open from hover to click ( or click arrow ) in Customizer > Layout > Primary Nav.
If thats ok, make that change and let us know.
And to keep the toggle inline add this CSS:
.main-navigation .main-nav ul ul li.menu-item-has-children>a {
padding-left: 15px;
}
.menu-item-has-children ul .dropdown-menu-toggle {
padding-right: 15px;
}