I am trying to create a vertical line that remains in the center of a div container regardless of the screen size. I want this line to be 1px thick. However, when I use transform: translate(-50%, -50%);, the border seems to become thicker than expected. Below is my HTML/CSS code.
.cases-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: black;
width: 480px;
height: 110px;
position: relative;
}
.item-border {
border-left: 1px solid #ff5a00;
height: 95px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
<div class="cases-container">
<div class="item-border"></div>
</div>Can anyone help me figure out what the issue might be?