CSS: How to position a div in the center with dynamic width
<p>I have a popup which is positioned in the center of the screen with: <code>transform: translate(-50%, -50%);</code> and <code>position: absolute</code>. Unfortunately for some reason my width is fixed and it is not dynamic ( based on the content ).</p>

<p>This is my jsfiddle: <a href="https://jsfiddle.net/qh13mnaf/1/" rel="nofollow">https://jsfiddle.net/qh13mnaf/1/</a></p>

<p>Why the width of the popup is not bigger? </p>