On hover add width from left instead of right

Question

In this example on hover the inner div add width from the right.

I want to make it enlarge from the left inside, how to make that.

#outer{
  width: 50px;
  height: 50px;
  margin: auto;
}

#inner{
  height: 50px;
  width: 50px;
  background-color: red;
  transition: all .5s;
}

#inner:hover{
  width: 150px;
}

<div id="outer">
  <div id="inner"></div>
</div>

Answer 1

adjust the margin-left instead of the width

#outer{
  width: 50px;
  height: 50px;
  margin: auto;
}

#inner{
  height: 50px;
  background-color: red;
  transition: all .5s;
}

#inner:hover{
  margin-left: -100px;
}

<div id="outer">
  <div id="inner"></div>
</div>