title: Carousell Controllers inside container
body: <p>im added a carousel to my website using boostrap framework, at first i inserted my carousel than added a container to give a paddings at the right and left, than i inserted after the carousel inner the carousel controllers, but for some reason the controllers is not getting the effect of the container.</p>
  
  <p>Html:</p>
  
  <pre><code> &lt;div class="container"&gt;
    &lt;div class="carousel-inner"&gt;
    &lt;div class="item active"&gt;&lt;img src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;img src="images/carousel-mission.jpg" alt="Mission"&gt;&lt;/div&gt;   
    &lt;div class="item"&gt;&lt;img src="images/carousel-vaccinations.jpg" alt="Vaccinations"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;img src="images/carousel-fish.jpg" alt="Fish"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals"&gt;&lt;/div&gt; 
    &lt;/div&gt;
  
     &lt;!-- Controls --&gt;
    &lt;a class="left carousel-control" href="#featured" role="button" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#featured" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
    &lt;/a&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/an2xn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/an2xn.jpg" alt="enter image description here"></a></p>