title: How can I keep Bootstrap carousel inside a container?
body: <p>I seem to be having difficulties with a bootstrap carousel it seems to &quot;Break&quot; 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)</p>
  <h3>Screenshot of error</h3>
  <p><img src="https://i.stack.imgur.com/ehJoK.png" alt="Screenshot of error" /></p>
  <pre><code>.project01-carousel {
   width:640px;
   height:360px;
   }
  
    &lt;div class=&quot;col-sm-4&quot;&gt;
    &lt;section class=&quot;project01-carousel halfheight&quot;&gt;
     &lt;section class=&quot;project-carousel-wrap halfheight&quot;&gt;
  
  &lt;!-- Carousel --&gt;
  &lt;div class=&quot;project-carousel owl-carousel owl-nav-sticky-wide&quot;&gt;
  
    &lt;div class=&quot;project-carousel-item project-01-carousel-item-01 halfheight 
    text-center&quot;&gt;
    &lt;img src=&quot;admin/uploaded_image/terrain_renders/&lt;?php echo $row['render1']; 
     ?&gt;&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;project-carousel-item project-01-carousel-item-02 halfheight 
    text-center&quot;&gt;
    &lt;img src=&quot;admin/uploaded_image/terrain_renders/&lt;?php echo $row['render2']; 
     ?&gt;&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;project-carousel-item project-01-carousel-item-03 halfheight 
    text-center&quot;&gt;
    &lt;img src=&quot;admin/uploaded_image/terrain_renders/&lt;?php echo $row['render3']; 
     ?&gt;&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;project-carousel-item project-01-carousel-item-04 halfheight 
     text-center&quot;&gt;
    &lt;img src=&quot;admin/uploaded_image/terrain_renders/&lt;?php echo $row['render4']; 
     ?&gt;&quot;&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;/section&gt;
    &lt;/section&gt;
    &lt;/div&gt;
  </code></pre>