Popup Menu not aligning correctly in IE

Ever since setting the document margin to 0 10% 0 10% via the document panel in the layout editor, I've had an issue with our themes menubar in Internet Explorer. (Note: I set that as the margin to center our page for that a4 look)

Here is a screenshot of the problem in IE.
I noticed if I use CSS specifically for IE that I've almost fixed this.

IE CSS

 div.dynarch-popup-menu  {
  margin-left: 10%; }

Screenshot in IE after applying the custom CSS

I am left with one problem though - the level 2 menu (which has forms, policies etc) is way off to the right - so it must share that same CSS that I used to fix up the initial issue.
So how can I solve this problem? What have I done wrong? Or what do I need to do differently?

The menu style that applied is called "aqua" on the 'menus' tab.

Using the evauation version of theme builder 3.3

Note:

On the layout > document panel the p