Image won't fill complete width of container - html

Question

My image slider isn't quite the way I want it.
The image won't fill the full width of the container unless my browser window is small. When my window is larger the right side of the image has a white space instead of the image filling the whole width.
Here is my code:
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-interval="6500" data-ride="carousel">
<!-- 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>
</ol>
<div class="fill">
<div class="carousel-inner">
<div class="active item carousel-fade">
<img src="EvanHeathYellowGreen.jpg" alt="Evan&MEKiss" >
</div>
<div class="item carousel-fade">
<img src="EvanCrossStreet.jpg" alt="Evan&MEKiss" >
</div>
<div class="item carousel-fade">
<img src="EvanMeLook.jpg" alt="Evan&MEKiss" >
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
and the CSS:
.fill {
overflow: hidden;
background-size: cover;
background-position: center;
background-image:"path/to/image.jpg";
}
.carousel-inner{
margin-left: auto;
}
.carousel{
margin-top: 20px;
border-top: 2px solid black;
border-bottom: 2px solid black;
}

Answer 1

Which is the image you are trying to fill?
If they are the ones with alt="Evan&MEKiss" then you can try Alberto Rubio's answer:
.item img {
width: 100%;
}
If you are trying to fill the background-image, you can try tweaking background-image to use url:
background-image:url("path/to/image.jpg");
Here's a codepen example with placeholder images: http://codepen.io/fawyna/pen/VaOmqX