Elements shifting to the left when resizing-CodePudding

I have a webpage that consists of an image, a gif (.gif) and a button (.Continue). I've managed to get the elements to resize when the screen is resized; however, I noticed that the elements shift to the left when the screen gets smaller. The .Continue button also leaves the gif even though it's supposed to be sitting atop it.

I was wondering how to go about fixing this issue. Any help is appreciated.

HTML

<div > 
    <div >
        <img src="./Images/1.gif" alt="">
        <img  src="./Images/2.gif" alt="">
            <div >
                 <div >
      <a href="./Page/index.html">
      Continue
      </a>
      </div>
            </div>

      
    </div>

CSS

.container {
  
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin-left: -2%;
    
}

.image-container {
    height: 90%;
    
    position: absolute;
    margin-top: 5%;
    margin-left:15%;


}

.image-container img {
    width: 100%;
    height: 100%;
}

.transition-image {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
    width: 100%;
    height: 100%;
    

}

.transition-image:hover {
     opacity: 1;

}


.gif {
    background: url(./Images/3.gif);
    position: relative;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 115%;
    width: 115%;
   margin-left: 105%;
    margin-top: -142%;

}

.Continue {
    position: absolute;
    margin-top: 112%;
    margin-left: 65%;
    font-family: arcade;
    animation-name: fadeIn ;
    animation-duration: 5s;
    animation-delay: 0s;
    opacity: 0;
    animation-fill-mode: forwards;


}

CodePudding user response：

Try this please:

Set margin-left:0 on .container

Remove margin-left and margin-top from .image-container. And instead add bottom:0; right:0;