Play Button Alignment Issues in HTML/CSS - html

Question

I have a header on the left side and want to add a button inline with the header on the right side.
When I add "position:relative: and top:400px, it moves the button perfectly. When i add "left:200px" it moves the button perfectly again, but when i hover it moves the button back to center of page.
How do i stop it from doing this?
i've created IMG images to show specifically how it moves:
https://imgur.com/a/SMLCbmN
**note when left:200px; is not added, the button doesn't move to center of page. i've tried removing the "text-algin: center;" along with a lot of other ideas..but am stuck.
Here is the code: https://codepen.io/TheGreatEscape/pen/ebYgGO
.container {
width: 100%;
text-align: center;
margin-top: 0vh;
}
.circle {
stroke: #f70f4d;
stroke-dasharray: 650;
stroke-dashoffset: 650;
-webkit-transition: all 0.5s ease-in-out;
opacity: 0.3;
}
.playBut {
position: relative;
top: 400px;
left: 200px;
border: none;
-webkit-transition: all 0.5s ease;
}
.playBut .triangle {
-webkit-transition: all 0.7s ease-in-out;
stroke-dasharray: 240;
stroke-dashoffset: 480;
stroke: #000;
transform: translateY(0);
}
.playBut:hover .triangle {
stroke-dashoffset: 0;
opacity: 1;
stroke: #f70f4d;
animation: nudge 0.7s ease-in-out;
}
#keyframes nudge {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
70% {
transform: translateX(-2px);
}
100% {
transform: translateX(0);
}
}
.playBut:hover .circle {
stroke-dashoffset: 0;
opacity: 1;
}
<div class='container'>
<a href='#' class='playBut'>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="213.7px" height="213.7px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7"
xml:space="preserve">
<polygon class='triangle' id="XMLID_18_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
73.5,62.5 148.5,105.8 73.5,149.1 "/>
<circle class='circle' id="XMLID_17_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3"/>
</svg>
</a>
</div>

Answer 1

see this demo if it helps
/*===== PLAY BUTTON ===*/
.container {
width: 100%;
text-align: center;
margin-top: 0vh;
}
.circle {
stroke: #f70f4d;
stroke-dasharray: 650;
stroke-dashoffset: 650;
-webkit-transition: all 0.5s ease-in-out;
opacity: 0.3;
}
.playBut {
/*position: relative;
top:400px;
left:200px;*/
border: none;
-webkit-transition: all 0.5s ease;
}
.playBut .triangle {
-webkit-transition: all 0.7s ease-in-out;
stroke-dasharray: 240;
stroke-dashoffset: 480;
stroke: #000;
transform: translateY(0);
}
.playBut:hover .triangle {
stroke-dashoffset: 0;
opacity: 1;
stroke: #f70f4d;
animation: nudge 0.7s ease-in-out;
}
#keyframes nudge {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
70% {
transform: translateX(-2px);
}
100% {
transform: translateX(0);
}
}
.playBut:hover .circle {
stroke-dashoffset: 0;
opacity: 1;
}
h2.title {
font-size: 40px;
margin: 60px 0 0;
display: inline-block;
float: left;
}
<div class='container'>
<h2 class="title">some text</h2>
<a href='#'class='playBut'>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="213.7px" height="213.7px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7"
xml:space="preserve">
<polygon class='triangle' id="XMLID_18_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
73.5,62.5 148.5,105.8 73.5,149.1 "/>
<circle class='circle' id="XMLID_17_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3"/>
</svg>
</a>
</div>
Update
you need
a.playBut, a.playBut:hover, a.playBut:active, a.playBut:focus {
left: 800px;
right: auto;
}
see demo
normal
on hover

Answer 2

Add position: absolute to your .playBut. top and left works only on absolute position.
See example here