Animate.css problem with div displays to the right of the screen - animate.css

Question

Hi so I have came across this following problem, everything works fine with
" class="animate__animated animate__fadeIn" class but as soon as I switch it to something different whole div goes off the screen to the right
HTML:
<div id="cointainer">
<div id="logo" class="animate__animated animate__fadeIn">Majestic Llama Art Gallery </div>
<div id="enter" class="animate__animated animate__fadeIn animate__delay-3s">ENTER</div>
Related css:
#container {
width: auto;
}
#logo{
position: absolute;
top: 44%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-image: url(bgrndNeonSplash1.jpg);
-webkit-text-fill-color: transparent;
-webkit-background-clip:text;
background-size: contain;
white-space: nowrap;
background-position: 50% 50%;
background-repeat:round;
font-family: 'Pushster', cursive;
font-size: 6vw;
text-align: center;
-webkit-text-stroke: 0.07vw #E900FF;
display: inline-block;
}
#enter {
position: absolute;
top: 44%;
left: 50%;
display: inline-block;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
font-size: 1.7vw;
margin-top: 6vw;
}
I am totally lost with this.
Thanks