aligning arrow icons in div

by Kheema Pandey

HTML

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <div class="unslider-arrow prev"><i class="fa fa-chevron-left"></i></div>
        <div class="unslider-arrow next"><i class="fa fa-chevron-right"></i></div>

CSS

#banner-container
{
	width:100%;
	float:left;
	
}

.banner
{   position: relative; 
    overflow: auto;
	width: 100%;
	margin:0 auto 0 auto; 
	
	
}


.banner ul li
{ 
    float: left;
	 margin:0 auto 0 auto;
	 
	
}

.banner ul li h1
{ 
   
	background:#fcfcfc;
	text-align:center;
	height:20px;
	font-family:'bariol_regularregular';
	font-size:15px;
	font-weight:100;
	padding:10px;
	
	
}
.banner ul li h1 a {text-decoration:none; color:#000;}


.unslider-arrow 
{
    display:inline-block;
    position:absolute;
}

.prev 
{
    top:95px;
    left:0px;
}
.prev >i{color:#000; font-size:1.5em; background:rgba(0,0,0,0.7); width:40px; height:40px; line-height:40px; text-align: center;}
.next >i{color:#000; font-size:1.5em;line-height:40px;text-align: center; background:rgba(0,0,0,0.7);width:40px; height:40px; }
.prev >i:hover{color:#ccc; cursor:pointer;}
.next >i:hover{color:#ccc;cursor:pointer; }
.next 
{
    top:95px;
    right:0px;
}