Bootstrap Carousel Controls Outside of Carousel

Question

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 width: 0%; on .carousel-controls 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.

What would be the correct way to do this? I feel like I'm going down the wrong path.

#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;
}

Here's a JSFiddle: https://jsfiddle.net/guhx5sjL/1/

Answer 1

Is this what you are looking for? If so its just some quick changes in your CSS:

#myCarousel {
  margin-left: 50px;
  margin-right: 50px;
}

.carousel-control.left {
  margin-left: -25px;
}

.carousel-control.right {
  margin-right: -25px;
}

I updated your js.fiddle here.