Panels not working in a fixed width page.

Panels not working in a fixed width page.

Hiyas!

I have made the page a fixed width so when people view the site on a tablet or computer it isn't using all the screen. The problem I am having is that the left panel isn't working when it comes out. In dreamweaver live view it works but online it doesn't.

I am using this styling for fixed width page and "overlay" for the panel

 @media only screen and (min-width: 600px){
            .ui-page {
                width: 600px !important;
                margin: 0 auto !important;
                position: relative !important;
                border-right: 2px #666 outset !important;
                border-left: 2px #666 outset !important;
            }
         .ui-header {
                width: 600px !important;
                margin: 0 auto !important;
                position: relative !important;
                
            }
.ui-footer {
                width: 600px !important;
                margin: 0 auto !important;
               
                
            }

I have tried different positions for the panel and if I make it pop out on the far left of the screen it works but as an overlay within the 600px space it just wont work live.

Any help would be appreciated. 

Here is an example of it not working :)


Here is it working in the far left...


I haven't coded the rest of the site until I can work out a fix.

Cheers,
Matt