Visit this link for code snippet <https://codepen.io/arunkayathi/pen/dRPYzz>

html

```
<html lang="en">

<head>

    <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
    <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">

</head>

<body>
    <section id="projects">
        <div class="content-box">
            <div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
                <h3>My Projects</h3>
                <div class="content-title-underline"></div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div id="my-projects" class="owl-carousel owl-theme">
                            <div class="project-list">
                                <div class="project-image">
                                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp1-NNfLpNtsFQY25z7A4u9pp2D_vJHTNU70RDupydx4i7BrMKYw" class="img-responsive" alt="project-image1">
                                </div>
                                <div class="project-info text-center">
                                    <h5>Project Title</h5>
                                    <p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque minus voluptatibus obcaecati temporibus, eligendi harum in iusto quasi dicta. Sunt tempora magnam eveniet, adipisci modi quos maxime sint expedita repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
                                    <div class="project-btn">
                                        <a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit Website</a>
                                    </div>

                                </div>
                            </div>
                            <div class="project-list">
                                <div class="project-image">
                                    <img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
                                </div>

                                <div class="project-info text-center">
                                    <h5>Project Title</h5>
                                    <p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas aliquid consequuntur . </p>
                                    <div class="project-btn">
                                        <a class="btn btn-lg btn-general btn-white" href="#" target="_blank">visit site</a>

                                    </div>

                                </div>
                            </div>
                            <div class="project-list">
                                <div class="project-image">
                                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQAOoZwRkgQ3KDjCJ2-GRtjKDc88iUqU6mJva17ym63D2W0XwnYw" class="img-responsive" alt="project-image1">
                                </div>
                                <div class="project-info text-center">
                                    <h5>Project Title</h5>
                                    <p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, omnis,  </p>
                                    <div class="project-btn">
                                        <a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit site</a>
                                    </div>

                                </div>
                            </div>
                            <div class="project-list">
                                <div class="project-image">
                                    <img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
                                </div>
                                <div class="project-info text-center">
                                    <h5>Project Title</h5>
                                    <p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint similique earum labore quos quidem ab! Quibusdam fugit consectetur tenetur odit, fuga amet aliquam architecto modi sequi ea, delectus, quisquam atque.</p>
                                    <div class="project-btn">
                                        <a class="btn btn-lg btn-general btn-white" href="#projects" role="button">Visit site</a>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <body>

```

css

```
    #projects {
    background-color: #f65d52;
    /*    background-color: #2098D1;*/
}

#projects .content-title h3 {
    color: #fff;
}

.project-info {
    padding: 25px 0 25px 0;
    color: #fff;

}

.project-info h5 {

    font-size: 25px;
    font-weight: 700;
}

.project-image img {
    max-width: 480px !important;
    max-height: 480px !important;
    margin: 0 auto;
    object-fit: contain;
}

.project-info-text {
    line-height: 170%;
    letter-spacing: 1px;
    color: #fff !important;
    font-weight: 500;
    width: 70%;
    margin: 0 auto;
}

.project-btn {
    padding-top: 30px;
}

```

js

```
$(document).ready(function () {
    $("#my-projects").owlCarousel({
        items: 1,
        autoplay: true,
        smartSpeed: 700,
        loop: true,
        autoplayHoverPause: true
    });

});

```

Hello all,

I am having a problem with arranging divs in a carousel slider. As you can see from the above link the position of project title in each slid is changing.So can somebody help me in fixing the width and height of each divs, so that text and images will not overflow and in every slide all divs starts at same position instead of going up or down.