Is there a way to position a font-awesome chevron icon or right arrow icon in such a way that its point touches the edge of the containing div perfectly? Despite using text-align: right, the icon still seems to have some spacing to the right preventing it from aligning with the edge. How can this spacing be controlled?
Below is an example code snippet where the issue can be observed. The sidebar does not align perfectly with the edge due to the extra space on the right side of the icon. Is there a solution to remove this spacing and achieve a perfect alignment?
.wrapper {
height: 100vh;
display: flex;
flex-direction: row;
}
.sidebar {
flex: 00 50px;
background-color: #ccc;
text-align: right;
}
.content {
flex: 1;
background-color: #000;
}<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<div class="wrapper">
<div class="sidebar">
<i class="fas fa-chevron-right"></i>
</div>
<div class="content">
</div>
</div>