CSS margin-left is breaking in Chrome Extension

Question

My situation is extremely confusing, and I haven't the slightest clue what's going on. I made a Firefox add-on to redesign a website using jQuery and CSS. When I tried to migrate the addon to Chrome (that part was simple, because the features I am using in each SDK are very similar), everything worked except one of the main design elements:

I have a menu with position: fixed; aligned to the left of the page, and margin-left: 150px; on the main container element. The problem is that the margin is completely disappearing when I open it in Chrome. It works fine in Firefox.

So then I copied all of the HTML, CSS, and JavaScript into a jsFiddle, and the margin worked fine. Everything was completely identical, so I can't figure out why it would work in jsFiddle but not on the website.

Using left: 150px works, but then the page spills 150px to the right, and those dreaded horizontal scrollbars appear.

Links:

Extension File (CRX): https://docs.google.com/open?id=0B3k3BjZD2YfiTWNzTlhsa0t5STg

Demo Website: http://demo.flvs.net (Username: demo, Password: demo)

jsFiddle (Some images don't load, but the code is identical): http://jsfiddle.net/CjSXA/

Answer 1

I just removed the margin-left from #page_cont and added it to #content-cont.

That made the content stop hiding under the menu, though the footer is still partially covered by it.