Alignment issues in children of looped words animation - html

Question

I used to do my best to solve the problem, however, it doesn't work. As you can see, if you run the code the animation is not inline or they are not in proper position, what I want to - the animation should be in between or centered in the Let's Make and Awesome elements. Looking forward and answer and if you mind can you please explain to make so that i will understand it fully. Thank You so much
.circle {
position: relative;
border-radius: 50%;
width: 30rem;
height: 30rem;
background-color: #6CA9A5;
margin: 5rem auto;
}
.hello, .hello2 {
position: relative;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
font-weight: 900;
letter-spacing: .2rem;
font-size: 1.5rem;
color: #fff;
text-align: center;
padding: 70px 0 2px 0;
/* z-index: 1; */
}
.hello2 {
position:absolute;
top: 58px; /* changeable */
left:50%;
transform:translateX(-50%);
}
.hello span:hover {
color: #f4511e;
transition: .59s;
}
.circle a {
position: absolute;
top:60%; /* changeable */
left:50%;
transform:translateX(-50%);
font-size: 15px;
text-decoration: none;
background: #fff;
padding: 15px 35px;
border-radius: 35px;
text-transform: uppercase;
}
/* .more a {
height: 150px;
width: 500px;
background-color: #fff;
} */
#container {
color:#999;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
font-size: 1.5rem;
font-weight: bold;
padding-top: 200px;
position: relative;
width:100%;
bottom: 45%;
display:block;
text-align: center;
}
#flip {
height: 80px;
overflow:hidden;
}
#flip > div > div {
border-radius: 30px;
color:#fff;
padding:4px 15px 4px 15px;
height:30px;
margin-bottom: 62px;
display:inline-block;
}
#flip > div > .ever {
/* height: 59px; */
}
#flip div:first-child {
animation: show 5s linear infinite;
}
#flip div div {
background:#42c58a;
}
#flip div:first-child div {
background:#4ec7f3;
}
#flip div:last-child div {
background:#DC143C;
}
#keyframes show {
0% {margin-top:-270px;}
5% {margin-top:-180px;}
33% {margin-top:-180px;}
38% {margin-top:-90px;}
66% {margin-top:-90px;}
71% {margin-top:0px;}
99.99% {margin-top:0px;}
100% {margin-top:-270px;}
}
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
<p class="hello">Let's Make </p>
<div id="container">
<div id="flip">
<div><div>wOrK</div></div>
<div><div>lifeStyle</div></div>
<div><div class="ever">Everything</div></div>
</div>
</div>
<p class="hello2">Awesome</p>
Read More
</div>
</div>