Top-section-menu IE11 showing it inside the padding instead of Top Nav menu area

Hi Cryout, thank you for the beautiful Roseta theme. However IE11 (and only IE11) is now showing a problem with the top navigation menu being rendered inside of the right padding, rather than appearing in the proper menu area.

All of my social links in the header top-right navigation menu are bunched up over top of themselves inside the right header padding of IE11. The Top right Navigation Menu appears to be all bunched up inside of the relatively small padding area, instead of spreading out and horizontally filling up the menu space. This problem is only in IE11.

I just started using this Top Navigation Menu area a few weeks ago, when I installed the Mega Menu plugin, and thats when I first noticed the problem. The problem still exists if I uninstall the plugin and try a plain “Top Menu” menu using the WordPress Theme Customizer, so the plugin author has no comment. I tried modifying the Theme Header (header.php) to move the “Top-section-menu” DIV to different places for rendering, but that had no success. I also used developer tools in IE and Chrome to assist with cross-checking the placement of the menu, but IE11 still renders it inside the right header padding. Customizing the General Layout -> Site Width has not effect. I already checked both the WordPress forum and this forum with no answer.

Please see the following linked images for (1) the example of the problem, and (2) how every other browser displays the Top Nav Menu.

https://paulturk.ca/temp/Roseta/roseta_nav1.png
https://paulturk.ca/temp/Roseta/roseta_nav2.png

This problem occurs in every page and post, and not just in the page as shown in the screenshots. Google Analytics is showing that a relatively significant proportion of my viewers still use IE11 so I need to aggressively pursue this solution. Thank you for your continued support and amazing work! Please help!

Website: paulturk.ca