Make menu items align the same when adding border on hover - html

Question

This is my code and I want the alignment to be the same
When I insert a border-left my text goes a bit to the right side but I want all the text to align in the same way.
When I hover it also there the same case.
If I remove the border-left then the text alignment is fine, but how do i get the same alignment when there is border?
<div class="set-leftcol">
<div class="leftcol-box">
<div class="leftcol active">
<div class="sett-i"><i class="fa fa-cog "></i></div>
<div class="sett-title">General</div>
</div>
<div class="leftcol">
<div class="sett-i"><i class="fa fa-key"></i></div>
<div class="sett-title">Security</div>
</div>
</div>
<div class="leftcol-box">
<div class="leftcol">
<div class="sett-i"><i class="fa fa-lock"></i></div>
<div class="sett-title">Privacy</div>
</div>
<div class="leftcol">
<div class="sett-i"><i class="fa fa-cog"></i></div>
<div class="sett-title">Timeline</div>
</div>
<div class="leftcol">
<div class="sett-i"></div>
<div class="sett-title">Blocking</div>
</div>
</div>
<div class="leftcol-box">
<div class="leftcol">
<div class="sett-i"><i class="fa fa-bell"></i></div>
<div class="sett-title">Notification</div>
</div>
<div class="leftcol">
<div class="sett-i"><i class="fa fa-mobile"></i></div>
<div class="sett-title">Mobile</div>
</div>
<div class="leftcol">
<div class="sett-i"><i class="fa fa-rss-square"></i></div>
<div class="sett-title">Followers</div>
</div>
</div>
</div>
http://codepen.io/anon/pen/NqGRqG

Answer 1

change your .leftcol to this :
.leftcol {
float: left;
clear: both;
width: 250px;
cursor: pointer;
background-color: #EBF9FF;
border-left: 4px solid transparent;
}
codepen

Answer 2

The wrong alignment is caused by the :hover state adding a 4px border, so the element is a bit wider when hovered.
One way to prevent that is to add a transparent border to the .leftcol elements, so that when they are hovered only the border color changes but not the width:
.leftcol {
border: 4px solid transparent;
}
Another option would be to use 4px padding on it, and remove that on hover. This is essentially the same trick as above, but uses a padding placeholder for non-hovered elements:
.leftcol {
padding-left: 4px;
}
.leftcol:hover {
padding-left: 0;
}

Answer 3

I don't know if you have intentionally complicated the markup to this extent because you need to do something further with the empty <div>s or have done so accidentally.
In case you didn't have a better way to figure it out, I suggest you take a look at my pen below:
Codepen link to simplify the above markup
I have stripped down your markup to the minimal level and yet achieved the same result you were expecting. Hope it helps you out. Cheers!