title: Bootstrap Carousel Controls Outside of Carousel
body: <p>I'm attempting to push my Bootstrap Carousel controls outside of the image but I seem to be having some problems. I've been able to get them out of the image by setting <code>width: 0%;</code> on <code>.carousel-controls</code> but the problem is it's not completely responsive and it seems that the left control is closer to the image compared to the right control. </p>
  
  <p>What would be the correct way to do this? I feel like I'm going down the wrong path.</p>
  
  <pre><code>#myCarousel {
    margin-left: 30px;
    margin-right: 30px;
  }
  
  .item img {
    margin-left: auto;
    margin-right: auto;
  }
  
  .selected img {
      opacity:0.5;
  }
  
  .carousel-caption {
      position: relative;
      left: auto;
      right: auto;
  }
  
  .carousel-control.left,
  .carousel-control.right {
    background: none;
    border: none;
  }
  
  .carousel-control.left {
    margin-left: -45px;
  }
  
  .carousel-control.right {
    margin-right: -45px;
  }
  
  .carousel-control {
    width: 0%;
  }
  
  .glyphicon-chevron-left, .glyphicon-chevron-right {
    color: grey;
    font-size: 40px;
  }
  </code></pre>
  
  <p>Here's a JSFiddle: <a href="https://jsfiddle.net/guhx5sjL/1/" rel="noreferrer">https://jsfiddle.net/guhx5sjL/1/</a></p>