title: How to center this popup text box
body: <p><br>
  This is a website that I and some friends of mine are building for their youtube channel.<br>
  I got this popup code from <a href="http://www.w3schools.com/howto/howto_js_popup.asp" rel="nofollow">W3schools</a><br><br>
  I have the popups working but I want the popups to be 320px wide instead of the 160px and aligned with the image. The problem is when I widen the popup to 320px and try to center the popup onto the image, it never works out. All of my solutions have either moved the popups further to the right OR have messed with the actual layout itself.<br><br>
  What I've tried - after setting the width to 320px, in the CSS I've tried deleting the margin-left property and/or setting it to 0px, I've tried deleting the left property and/or setting it to auto, I've deleted the padding, I've messed with the position property in both the .popup and .popup .popuptext but alas, nothing has worked. They have either messed with the layout itself or just moved the popups further right. I've also tried researching online for the solutions but I haven't found a solution because I think that this problem is too specific, since I got the original code from W3schools that nobody has addressed it before and posted it online. Either that, or I'm still just too new to be able to research the answer specifically enough. Also, I'm still trying to wrap my head around the position property.<br> I think the problem is in the position property because when I inspect the elements, I see how much positioning there is other than margin or padding, and I want to say that's what is throwing things off. <br><br>
  Here is the relevant CSS code-<br></p>
  
  <pre><code>.popup {
      position: relative;
      display: inline-block;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  
  /* The actual popup */
  
  .popup .popuptext {
      visibility: hidden;
      width: 160px; 
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 8px 0;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -80px;
  }
  
  /* Popup arrow */
  .popup .popuptext::after {
  
  }
  
  /* Toggle this class - hide and show the popup */
  .popup .show {
      visibility: visible;
      -webkit-animation: fadeIn 1s;
      animation: fadeIn 1s;
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
      from {opacity: 0;}
      to {opacity: 1;}
  }
  
  @keyframes fadeIn {
      from {opacity: 0;}
      to {opacity:1 ;}
  }
  </code></pre>
  
  <p>And here is a link to the actual site so you guys can see what's going on and check out the source code behind it.
  <a href="http://civilwardigitaldigest.com/pages/episodes/volumeTwo.php" rel="nofollow">The Site</a></p>
  
  <p><br>
  Thank you so much. Any and all help is greatly appreciated. To see the popup, click the episode title.</p>