How to fix the carousel image sliding from end of the page

When the carousel image is sliding to left it was showing that the image is sliding from the end of the screen. I want to slide the image from the end of the div. I used the bootstrap carousel image. It was working before but when I make it to move only right it was moving from end of the page. Please fix that.

Html code

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style2.css">
    <script src="js/script.js"></script>
    <script src="js/script2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>
.carousel-indicators{


}
.carousel-inner{
position: relative;
width: 911px;
overflow: hidden;
left: 121px;

}
h2{
font-size: 18px;
top: -20px;
position: relative;
background: #0baadb;
height: 22px;
width: 67%;
left: 17%;

}
ol, ul{
margin-top: 0px;
margin-bottom: 0px;
}
.carousel.vertical {
    position: relative;
}

.carousel.vertical .carousel-inner {
    height: 100%;
    width: auto;
}
p{
line-height: 1.1;
}

.carousel.vertical .carousel-inner > .item {
    transition: 0.6s ease-in-out;
    transform: translate3d(100%, 0, 0);
    top: 0;
    background: #ccc;
    width: 100%;
    height: 300px;
    border: 1px solid #e6e6e6;
}

.carousel.vertical .carousel-inner > .item div {
    text-align: center;
    height: 100%;
    font-size: 80px;
    line-height: 300px;
}

.carousel.vertical .carousel-inner > .next,
.carousel.vertical .carousel-inner > .prev,
.carousel.vertical .carousel-inner > .right {
    transform: translate3d(100%, 0, 0);
    top: 0;
}

.carousel.vertical .carousel-inner > .left,
.carousel.vertical .carousel-inner > .prev.right,
.carousel.vertical .carousel-inner > .next.left,
.carousel.vertical .carousel-inner > .active {
    transform: translate3d(0, 0, 0);
    top: 0;
}

.carousel.vertical .carousel-inner > .active.right,
.carousel.vertical .carousel-inner > .active.left {
    transform: translate3d(-100%, 0, 0);
    top: 0;
}
</style>
</head>

<body>

    <div class="container">
        
        <div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
            <ol class="carousel-indicators" >
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
                <li data-target="#myCarousel" data-slide-to="4"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <p class="slider">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa voluptatibus,<br><br>quas ad dolorum, recusandae consectetur. Lorem, ipsum dolor sit
                        amet <br>est impedit culpa dignissimos laudantium
                        deleniti, dicta exercitationem sit
                        <br> consectetur adipisicing elit. Repellendus, autem iste. Soluta quas quisquam 
                       <br>reiciendis vero quod, corrupti dolorum magnam culpa
                        corporis <br>deserunt quibusdam.
                        Incidunt eveniet unde, ratione rem at error accusantium!</p>
                    <img src="Images/1.jpg" class="slider_image">
                </div>

                <div class="item">
                    <p class="slider">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa voluptatibus,<br><br>quas ad dolorum, recusandae consectetur. Lorem, ipsum dolor sit
                        amet <br>est impedit culpa dignissimos laudantium
                        deleniti, dicta exercitationem sit
                        <br> consectetur adipisicing elit. Repellendus, autem iste. Soluta quas quisquam 
                       <br>reiciendis vero quod, corrupti dolorum magnam culpa
                        corporis <br>deserunt quibusdam.
                        Incidunt eveniet unde, ratione rem at error accusantium!</p>
                    <img src="Images/1.jpg" style="width:100%;" class="slider_image">
                </div>

                <div class="item">
                    <p class="slider">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa voluptatibus,<br><br>quas ad dolorum, recusandae consectetur. Lorem, ipsum dolor sit
                        amet <br>est impedit culpa dignissimos laudantium
                        deleniti, dicta exercitationem sit
                        <br> consectetur adipisicing elit. Repellendus, autem iste. Soluta quas quisquam 
                       <br>reiciendis vero quod, corrupti dolorum magnam culpa
                        corporis <br>deserunt quibusdam.
                        Incidunt eveniet unde, ratione rem at error accusantium!</p>
                    <img src="Images/1.jpg" style="width:100%;" class="slider_image">
                </div>
                <div class="item">
                    <p class="slider">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa voluptatibus,<br><br>quas ad dolorum, recusandae consectetur. Lorem, ipsum dolor sit
                        amet <br>est impedit culpa dignissimos laudantium
                        deleniti, dicta exercitationem sit
                        <br> consectetur adipisicing elit. Repellendus, autem iste. Soluta quas quisquam 
                       <br>reiciendis vero quod, corrupti dolorum magnam culpa
                        corporis <br>deserunt quibusdam.
                        Incidunt eveniet unde, ratione rem at error accusantium!</p>
                    <img src="Images/1.jpg" style="width:100%;" class="slider_image">
                </div>
                <div class="item">
                    <p class="slider">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa voluptatibus,<br><br>quas ad dolorum, recusandae consectetur. Lorem, ipsum dolor sit
                        amet <br>est impedit culpa dignissimos laudantium
                        deleniti, dicta exercitationem sit
                        <br> consectetur adipisicing elit. Repellendus, autem iste. Soluta quas quisquam 
                       <br>reiciendis vero quod, corrupti dolorum magnam culpa
                        corporis <br>deserunt quibusdam.
                        Incidunt eveniet unde, ratione rem at error accusantium!</p>
                    <img src="Images/1.jpg" style="width:100%;" class="slider_image">
                </div>
            </div>

        </div>
    </div>

</body>

</html>

css code

* {
    margin: 0;
    padding: 0;
}


.slider {
margin: 0 0 -187px !important;
background: #6c6cf7 !important;
position: relative !important;
height: 258px !important;
padding: 54px !important;
}

.slider_image {
width: 31% !important;
position: relative !important;
top: -24px !important;
left: 599px !important;
}

.carousel-indicators li {
    display: inline-block !important;
    text-indent: -999px!important;
    cursor: pointer!important;
    background-color: rgba(0, 0, 0, 0)!important;
    border: 1px solid #fff!important;
    border-radius: 4px !important;
    position: relative!important;
left: -355px !important;
top: -5px !important;
}

.carousel-indicators .active {
    width: 11px!important;
    height: 11px!important;
}
.carousel.vertical {
    position: relative !important;
}

.carousel.vertical .carousel-inner {
    height: 100%!important;
    width: auto!important;
}
.carousel.vertical {
    position: relative !important;
}

.carousel.vertical .carousel-inner {
    height: 100% !important;
    width: auto !important;
}

.carousel.vertical .carousel-inner > .item {
    transition: 0.6s ease-in-out!important;
    transform: translate3d(100%, 0, 0) !important;
    top: 0!important;
    background: #ccc!important;
    width: 80% !important;
    height: 260px !important;
    border: 1px solid #e6e6e6 !important;
}

.carousel.vertical .carousel-inner > .item div {
    text-align: center !important;
    height: 100% !important;
    font-size: 80px !important;
    line-height: 300px !important;
}

.carousel.vertical .carousel-inner > .next,
.carousel.vertical .carousel-inner > .prev,
.carousel.vertical .carousel-inner > .right {
    transform: translate3d(100%, 0, 0) !important;
    top: 0 !important;
}

.carousel.vertical .carousel-inner > .left,
.carousel.vertical .carousel-inner > .prev.right,
.carousel.vertical .carousel-inner > .next.left,
.carousel.vertical .carousel-inner > .active {
    transform: translate3d(0, 0, 0) !important;
    top: 0 !important;
}

.carousel.vertical .carousel-inner > .active.right,
.carousel.vertical .carousel-inner > .active.left {
    transform: translate3d(-100%, 0, 0) !important;
    top: 0 !important;
}