Extra space on left side of Bootstrap carousel's left arrow control

Question

Here's a link to my codepen: http://codepen.io/Chiz/pen/xwVvZJ

Here's a screenshot of the issue: https://gyazo.com/0c59df7f083c6427818a68de23eb513e

Here's the inserted code for convenience:

	html, body
	{
		height:100vh;
		width:100%;
	}

	.carousel-inner > .item > img
	{
		width:100%;
		margin:auto;
  	}
	
	.carousel-control.left, .carousel-control.right
	{
		background: none !important;
		filter: progid: none !important;
		outline: 0;
 	}
	.carousel:hover .carousel-control
	{
	  	visibility: visible;
	}
	
	.chiz-slide1 {	background:url("http://www.designerspics.com/wp-content/uploads/2014/07/origami_windmill_free_photo-690x457.jpg") no-repeat center center fixed; }
	.chiz-slide2 {	background:url("http://www.designerspics.com/wp-content/uploads/2014/12/boats_3_free_photo-690x457.jpg") no-repeat center center fixed; }
	
	.chiz-slide1, .chiz-slide2
	{
		height:100vh;
		background-size:cover;
	}
	
	div#carol
	{
		-webkit-transform-style:preserve-3d;
  		-moz-transform-style:preserve-3d;
		transform-style:preserve-3d;
	}
	
	/*select the <a> element that uses both the "carousel-control" AND "left" class*/
	a[href="#carol"]
	{
		width:5rem;
		height:5rem;
		
		position:absolute;
		top:50%;
  		transform:translateY(-50%);
	}
	a[href="#carol"].left
	{
		left:3%;
	}
	a[href="#carol"].right
	{
		right:3%;
	}
	
	a[href="#carol"] .glyphicon-chevron-left:before, a[href="#carol"] .glyphicon-chevron-right:before
	{
		outline:1px solid black;
       /*Reset the icon*/
       content: " ";
	   
       /*Give layout*/	   
       display:block;
	   
       /*Your image as background*/
	   background:url("http://www.Oneniceday.com/Left.png") no-repeat;
	   background-size:cover;
       
	   /*To show full image set the dimensions*/
	   width:5rem;
	   height:5rem;
   }
   
   a[href="#carol"] .glyphicon-chevron-right:before
   {
	   background:url("http://www.Oneniceday.com/Right.png") no-repeat;
   	   background-size:cover;
	   /*To show full image set the dimensions*/
	   width:5rem;
	   height:5rem;
   }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <div class="container-fluid">
        <div class="row">
        	<div id="carol" class="carousel slide" data-ride="carousel">
            
            	<!--wrapper for indicators-->
            	<ol class="carousel-indicators">
                	<li data-target="#carol" data-slide-to="0" class="active"></li>
					<li data-target="#carol" data-slide-to="1"></li>
                </ol>
                
                <!--wrapper for images-->
                <div class="carousel-inner" role="listbox">
                	<div class="item active chiz-slide1">
                    </div>
                    <div class="item chiz-slide2">
                    </div>
                </div>
                
                <a class="left carousel-control" href="#carol" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a>
                <a class="right carousel-control" href="#carol" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
            </div>
        </div>
    </div>

Any advice would be greatly appreciated!

Answer 1

The top and left of your glyphicons are being offset by 50% of their container (i.e. 25 px).

This will keep your glyphicons consistent with the positioning of their containing anchor tags:

#carol a.carousel-control span {
    left: 0;
    margin: 0;
    top: 0;
}

Answer 2

You had 3% left and right for icons.

You can adjust However you want.

a[href="#carol"].left
    {
        left:0px;
    }
    a[href="#carol"].right
    {
        right:20px;
    }

Demo here