Div is sliding after hover using css

Question

I have created the box and when I hover on the box then that box sliding going to the right side that I don't want. I need when the user hovers on the box then display border without sliding.

Would you help me in this?

.wid-30{width: 30%;}
.bg{background-color: red;}
.wid-30:hover{border-left: 10px solid yellow;}
.padding{padding: 10px;}

<div class="wid-30 bg padding">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies diam a dui auctor commodo. Proin nulla nibh, fermentum eu purus quis, hendrerit posuere arcu</p>
</div>

Answer 1

You need to add border-left: 10px solid red; inside .bg

.wid-30 {
  width: 30%;
}

.bg {
  background-color: red;
  border-left: 10px solid red;
}

.wid-30:hover {
  border-left: 10px solid yellow;
}

.padding {
  padding: 10px;
}

<div class="wid-30 bg padding">
  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies diam a dui auctor commodo. Proin nulla nibh, fermentum eu purus quis, hendrerit posuere arcu</p>
</div>

Answer 2

You can simply set padding-left: 0 when the element is :hovered-over, so that it does not move. Here's an example:

.wid-30 {
  width: 30%;
}

.bg {
  background-color: red;
}

.wid-30:hover {
  border-left: 10px solid yellow;
  padding-left: 0;
}

.padding {
  padding: 10px;
}

<div class="wid-30 bg padding">
  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies diam a dui auctor commodo. Proin nulla nibh, fermentum eu purus quis, hendrerit posuere arcu</p>
</div>