title: Extra space on left side of Bootstrap carousel's left arrow control
body: <p>Here's a link to my codepen: <a href="http://codepen.io/Chiz/pen/xwVvZJ" rel="nofollow">http://codepen.io/Chiz/pen/xwVvZJ</a></p>
  
  <p>Here's a screenshot of the issue: <a href="https://gyazo.com/0c59df7f083c6427818a68de23eb513e" rel="nofollow">https://gyazo.com/0c59df7f083c6427818a68de23eb513e</a></p>
  
  <p>Here's the inserted code for convenience:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> html, body
   {
    height:100vh;
    width:100%;
   }
  
   .carousel-inner &gt; .item &gt; 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 &lt;a&gt; 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;
     }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
           &lt;div id="carol" class="carousel slide" data-ride="carousel"&gt;
              
               &lt;!--wrapper for indicators--&gt;
               &lt;ol class="carousel-indicators"&gt;
                   &lt;li data-target="#carol" data-slide-to="0" class="active"&gt;&lt;/li&gt;
       &lt;li data-target="#carol" data-slide-to="1"&gt;&lt;/li&gt;
                  &lt;/ol&gt;
                  
                  &lt;!--wrapper for images--&gt;
                  &lt;div class="carousel-inner" role="listbox"&gt;
                   &lt;div class="item active chiz-slide1"&gt;
                      &lt;/div&gt;
                      &lt;div class="item chiz-slide2"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  
                  &lt;a class="left carousel-control" href="#carol" role="button" data-slide="prev"&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;a class="right carousel-control" href="#carol" role="button" data-slide="next"&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any advice would be greatly appreciated!</p>