Bootstrap carousel chevron not aligning properly - html

Question

Using Bootstrap carousel. The left and right controls are not aligned. The right control chevron work fine but the left is causing some problems. It seems to drop lower and lower when the image become larger. I've tried using CSS like so:
.carousel-control .icon-prev, .carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left, .carousel-control
.glyphicon-chevron-right, .glyphicon-circle-arrow-left,
.carousel-control .glyphicon-circle-arrow-left,
.carousel-control .glyphicon-circle-arrow-right {
display: inline-block;
position: absolute;
top: 50%;
z-index: 5;
}
But that didn't help at all. Here is the HTML script. Any clues?
<script type="text/dust" id="posting-detail-template">
<nav class="posting-detail-navbar navbar navbar-default">
<div class="container-fluid">
<div class="row">
<div class="backbutton">
<button type="button" class="btn btn-default navbar-btn posting-detail-reset-button navbar-left">
<span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span> Back
</button>
<p class="navbar-text navbar-left"><b>{title} - ${price}</b></p>
</div>
</div>
</nav>
<div class="row">
<div class="col-xs-7">
<div class="posting-detail-carousel">
<div class="container-fluid">
<h2>{title}</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/sample-apartment.jpeg" alt="Apartment" align="middle">
</div>
<div class="item">
<img src="img/sample-apartment.jpeg" alt="Apartment" align="middle">
</div>
<div class="item">
<img src="img/sample-apartment.jpeg" alt="Apartment" align="middle">
</div>
<div class="item">
<img src="img/sample-apartment.jpeg" alt="Apartment" align="middle">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="pull-right">
<div class="button-group posting-detail-buttons btn-group" role="group">
<button type="button" class="favorite btn btn-warning">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Favorite
</button>
<button type="button" class="contact btn btn-success">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact
</button>
</div>
</div>
<div class="posting-detail-list panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">{title} - ${price}</h3>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item"><b>Description:</b> {description}</li>
<li class="list-group-item"><b>Posted:</b> {date}</li>
<li class="list-group-item"><b>Number of Bedrooms:</b> {numBed}</li>
<li class="list-group-item"><b>Number of Bathrooms:</b> {numBath}</li>
<li class="list-group-item"><b>Number of Tenants:</b> {numTenants}</li>
<li class="list-group-item"><b>Location:</b> {city} - {zip}</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="map">
<h3>Transit Directions</h3>
<iframe class="neighborhood-map" src="https://www.google.com/maps/embed/v1/directions?key=AIzaSyBNSSuICv6MPc13PfZ1Yu0KyDSsDG5eLJw
&origin={city}%2C%20CA%20{zip}
&destination=1600%20Holloway%20Ave%2C%20San%20Francisco%2C%20CA%2094132
&mode=transit
&zoom=12">
</iframe>
</div>
</div>
</div>
</script>