How to center this popup text box - html

Question

This is a website that I and some friends of mine are building for their youtube channel.
I got this popup code from W3schools
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.
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. 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.
Here is the relevant CSS 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 ;}
}
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.
The Site
Thank you so much. Any and all help is greatly appreciated. To see the popup, click the episode title.

Answer 1

You need to remove the margin-left.
After you do that, set your desired width and define a property called transformwith a value of translateX(-50%);
Leaving you with:
.popup .popuptext {
visibility: hidden;
width: 320px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
}
I don't know if you are aware but Bootstrap already has its own popover.
On a side note, you should not be looking at W3Schools, it is not a good source.
Here are some better resources:
Plain Javascript
CSS Reference Codrops

Answer 2

It seems that if you remove the left: 50% and margin-left and then add width: 320px your problem is gone. Try not to just copy-paste from W3Schools as it's very outdated. A more reliable source is MDN.

Answer 3

you could always use bootstrap class text-center
http://getbootstrap.com/css/