How can I keep Bootstrap carousel inside a container? - html

Question

I seem to be having difficulties with a bootstrap carousel it seems to "Break" outside of the container / row. I'm not 100% sure of what kind of information I may need to provide (First time posting here for help) But here is a screenshot followed by the code (Just a typical bootstrap carousel resized)
Screenshot of error
.project01-carousel {
width:640px;
height:360px;
}
<div class="col-sm-4">
<section class="project01-carousel halfheight">
<section class="project-carousel-wrap halfheight">
<!-- Carousel -->
<div class="project-carousel owl-carousel owl-nav-sticky-wide">
<div class="project-carousel-item project-01-carousel-item-01 halfheight
text-center">
<img src="admin/uploaded_image/terrain_renders/<?php echo $row['render1'];
?>">
</div>
<div class="project-carousel-item project-01-carousel-item-02 halfheight
text-center">
<img src="admin/uploaded_image/terrain_renders/<?php echo $row['render2'];
?>">
</div>
<div class="project-carousel-item project-01-carousel-item-03 halfheight
text-center">
<img src="admin/uploaded_image/terrain_renders/<?php echo $row['render3'];
?>">
</div>
<div class="project-carousel-item project-01-carousel-item-04 halfheight
text-center">
<img src="admin/uploaded_image/terrain_renders/<?php echo $row['render4'];
?>">
</div>
</div>
</section>
</section>
</div>

Answer 1

Make sure you don't have a static width for your content, and I notice you are using Owl Carousel in Bootstrap, so make sure you aren't duplicating any classes there/have Bootstrap carousel styles and js turned off so there's no conflicts.
Please note, I only used !important to overcome an img style that was overriding my 100% width call for it. You shouldn't have to use the !important tag in your code.
.project01-carousel {
/*width:640px;*/
width: 100%;
max-width: none;
height:auto;
border: 1px solid red;
}
img {
width: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4">
<section class="project01-carousel halfheight">
<section class="project-carousel-wrap halfheight">
<!-- Carousel -->
<div class="project-carousel owl-carousel owl-nav-sticky-wide">
<div class="project-carousel-item project-01-carousel-item-01 halfheight
text-center">
<img src="http://placehold.it/500x500">
</div>
<div class="project-carousel-item project-01-carousel-item-02 halfheight
text-center">
<img src="http://placehold.it/500x500">
</div>
<div class="project-carousel-item project-01-carousel-item-03 halfheight
text-center">
<img src="http://placehold.it/500x500">
</div>
<div class="project-carousel-item project-01-carousel-item-04 halfheight
text-center">
<img src="http://placehold.it/500x500">
</div>
</div>
</section>
</section>
</div>

Answer 2

First of all,you should wrap your
<div class="col-sm-4">
In a row and wrap the row in a container like this
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
And also you should remove the width for
roject01-carousel