Выравнивание по левому краю Magnific Popup - встроенный в DIV ID

У меня возникла проблема с великолепным всплывающим окном. Я хочу, чтобы выровнять по центру вверх, а не появляться на экране по отношению к браузеру. есть идеи как это сделать? Кажется, я не могу найти то, что всплывает относительно (я пытался часами и я новичок в jQuery). Я пробовал наследовать, фиксированный, абсолютный и каждый раз, когда всплывающее окно появляется в разных областях экрана, если я увеличил масштаб.

Подводя итог, я хочу скопировать этот сайт: http://www.madridmontessori.org/site_eng.html (это сделано во Flash, однако)

Я не уверен, что для меня неплохо поиграть с настройками, но я все равно это сделал... для меня это не очень понравилось = S

.mfp-container {
  position: absolute;
  width: 1167px;
  height: auto;
  margin-left:auto;
  margin-right:auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color:red; }

Что касается кода jQuery, я даже не собираюсь его вырабатывать, так как я не пропустил одну строку без ошибки. = D

Здесь еще несколько пробных сбоев, которые могут помочь вам помочь:

<div id="body" style="position:absolute;">
<div id="popup-1" class="zoom-anim-dialog mfp-hide" style="position: relative; top: 30px; left: 50px;">
    <h1>Title here</h1>
    <p>Content here  </p>
</div>

-

#popup-1 {
    background: white;
    padding: 10px 20px;
    text-align: left;
    max-width: 500px;
    top:150px;
    left: 30px;
    position: relative;
}