Display/Position/ pop up box was in middle -now it's not- help?

I am trying to finish up this site, and I had the little 'try it' pop up box coming up in the middle of the page just fine, then I guess I changed something somewhere and now it is popping up on the left- not a huge deal but it is bugging me. Can someone take a peek at the code and tell me what I messed up? Thanks so much in advance!

Just click on either of the 'demo' buttons towards the bottom of the screen to see the box.
greenscreenwizardpro.com/try-now/

 

in master.css for the class .demo-pop-up add margin:auto; and that should get it centered in parent.

However that could also fail because you are using client side scripting that may corrupt the the Document Object, so what is indicated as being source may not in fact be the basis of rendering.

The CSS is a bit on the messy side and that probably contributed to whatever mistake you made to mess it up, you have bloat in the CSS with duplicate declarations and what appears to be declarations that probably can't be true because of broken cascades.

 

try this change the position: absolute; to fixed;

.demo-pop-up {
position: fixed;
width: 100%;
height: 100%;
font-size: 0;
z-index: 2;
cursor: pointer;
}

Code (CSS):

if it doesnt work try adding the margin: 0 auto; to the code above.
and

body {
width: 100%;
font-family: arial;
font-size: 11px;
color: #4A4848;
}

Code (CSS):

 

Hi evelester,

Here's the solution:
.demo-pop-up - from absolute to relative
.demo-pop-up .inner - from inline-block to block
Also remove the inlined "margin: 0 auto !important;" in <div class="inner" style="margin: 0 auto !important;"> So that it's properly controlled via CSS below.

.demo-pop-up {
    position: relative;
}
.demo-pop-up .inner {
    display: block;
    margin: 50px auto 0;
}

Code (CSS):

Preview: After fix above applied:


I hope you follow my instructions above.

Thanks and God bless always!

Best regards,
alfieindesigns
Front-End Developer / Web Designer / UX Designer
www.alfieindesigns.com