title: Left aligning Magnific Popup - Inline to a DIV ID
body: <p>I'm having a bit of an issue with the magnific popup. I want to left align the pop up rather than having it appear center on the screen relative to the browser. Any idea how to do this? I can't seem to find what the pop up is relative to (I've been trying for hours and I'm new to jQuery). I've tried inherit, fixed, absolute and every time the pop up appears in different areas of the screen if I zoomed out. </p>
  
  <p>To sum it up, I want to copy this website: <a href="http://www.madridmontessori.org/site_eng.html" rel="nofollow">http://www.madridmontessori.org/site_eng.html</a>
  (it's done in Flash, however)</p>
  
  <p>I'm not sure if it's a good idea for me to play around with the settings, but I did it anyway... it didn't do much for me =S</p>
  
  <pre><code>.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; }
  </code></pre>
  
  <p>As for the jQuery code, I'm not even going to put it up as I didn't make it past one line without an error. =D</p>
  
  <p>Here's a couple more trial failures that may help you help me:</p>
  
  <pre><code>&lt;div id="body" style="position:absolute;"&gt;
  &lt;div id="popup-1" class="zoom-anim-dialog mfp-hide" style="position: relative; top: 30px; left: 50px;"&gt;
      &lt;h1&gt;Title here&lt;/h1&gt;
      &lt;p&gt;Content here  &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>--</p>
  
  <pre><code>#popup-1 {
      background: white;
      padding: 10px 20px;
      text-align: left;
      max-width: 500px;
      top:150px;
      left: 30px;
      position: relative;
  }
  </code></pre>