Problems with animations

So, basicly, I’ve made an animation to display a tiny white window on a hover on the title : Bees and Cubes.
Problem is that that window is not displaying in the middle but in the left side so it looks kind of weird.
Here is a html snippet for orientations:


<div class="inf"><button class="ipg"><h3 style="margin-bottom: 0.6em; color:#fff;">Animație : Bees and cubes</h3></button>
						<ul>
							<li >Aceasta este o pagină cu jocuri, animații și alte chestii</li>
						</ul>
 </div>

Here is my pen: