-webkit-animation is off center with position: relative

I have a simple thing going on where there's images moving from one end of the screen to the other with -webkit-animation with a background image behind them. Technically it works perfectly fine, it's just off center. Instead of starting at one edge of the screen, the elements start out in the middle and go offscreen before coming back. Oddly, if I use position: absolute, it works perfectly fine, but obviously that breaks the backgrounds and spacing.

#ship {
  position: relative;
  -webkit-animation: linear infinite;
  -webkit-animation-name: ship1;
  -webkit-animation-duration: 60s;
  z-index: 1;
}
@-webkit-keyframes ship1 {
  0% {
    right: 0;
  }
  48% {
    -webkit-transform: rotateY(0deg); 
  }
  50% { 
    right: calc(100% - 139px);
    -webkit-transform: rotateY(180deg); 
  }
  98% {
    -webkit-transform: rotateY(180deg); 
  }
  100% {
    right: 0;    
     -webkit-transform: rotateY(0deg);
  }
}

#fish1 {
  position: relative;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 15s;
  padding: 10px;
  z-index: 1;
}
@-webkit-keyframes run {
  0% {
    right: 0;
  }
  48% {
    -webkit-transform: rotateY(0deg); 
  }
  50% { 
    right: calc(100% - 100px);
    -webkit-transform: rotateY(180deg); 
  }
  98% {
    -webkit-transform: rotateY(180deg); 
  }
  100% {
    right: 0;    
     -webkit-transform: rotateY(0deg);
  }
}


/* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
  top: 100px;
  left: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

.myBtn_multi {
  border: none;
  padding: 0;
  background: none;
}

        /* Modal Content */
        .modal-content {
            background-color: #000000;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 400px;
        }

        /* The Close Button */
        .close {
            color: #ffffff;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

.center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 95vh;
}

<!DOCTYPE html>
<html>
  <head>
    
  </head>

<body style="background-color:black;">  
  
     <center><p style="background-image: url('https://salamandersden.neocities.org/hehe.gif'); box-sizing: border-box; width: 100%; height: 100%; text-align:center; margin-bottom:0;">
    ⠀
    <img id="ship" src="https://salamandersden.neocities.org/ship.gif" width=139px>
       
    </p></center>   

<center><p style="background-image: url('https://salamandersden.neocities.org/bublez.gif'); box-sizing: border-box; width: 100%; height: 100%; text-align:center; margin:0; padding-top:0;">
    <!-- Trigger/Open The Modal -->
  
<button id="fish1" class="myBtn_multi"><img src="https://salamandersden.neocities.org/cropfish.gif" width=143px></button><br>
  
 <script src="./fish.js"></script>
</center>

  </body>
</html>

How would I go about centering this? I included my modal css in case that's the issue.

Solution

Just need to change text-align: center to text-align: right in your inline style.

#ship {
  position: relative;
  -webkit-animation: linear infinite;
  -webkit-animation-name: ship1;
  -webkit-animation-duration: 60s;
  z-index: 1;
}

@-webkit-keyframes ship1 {
  0% {
    right: 0;
  }
  48% {
    -webkit-transform: rotateY(0deg);
  }
  50% {
    right: calc(100% - 139px);
    -webkit-transform: rotateY(180deg);
  }
  98% {
    -webkit-transform: rotateY(180deg);
  }
  100% {
    right: 0;
    -webkit-transform: rotateY(0deg);
  }
}

#fish1 {
  position: relative;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 15s;
  padding: 10px;
  z-index: 1;
}

@-webkit-keyframes run {
  0% {
    right: 0;
  }
  48% {
    -webkit-transform: rotateY(0deg);
  }
  50% {
    right: calc(100% - 100px);
    -webkit-transform: rotateY(180deg);
  }
  98% {
    -webkit-transform: rotateY(180deg);
  }
  100% {
    right: 0;
    -webkit-transform: rotateY(0deg);
  }
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  top: 100px;
  left: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.myBtn_multi {
  border: none;
  padding: 0;
  background: none;
}


/* Modal Content */

.modal-content {
  background-color: #000000;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 400px;
}


/* The Close Button */

.close {
  color: #ffffff;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 95vh;
}

<body style="background-color:black;">

  <p style="background-image: url('https://salamandersden.neocities.org/hehe.gif'); box-sizing: border-box; width: 100%; text-align: right; margin-bottom:0;">
    <img id="ship" src="https://salamandersden.neocities.org/ship.gif" width=139px>
  </p>
  <p style="background-image: url('https://salamandersden.neocities.org/bublez.gif'); box-sizing: border-box; width: 100%; text-align:right; margin:0; padding-top:0;">
    <!-- Trigger/Open The Modal -->

    <button id="fish1" class="myBtn_multi"><img src="https://salamandersden.neocities.org/cropfish.gif" width=143px></button><br>

    <script src="./fish.js"></script>
  </p>
</body>