Почему при наведении у меня сдвигается текст?

Question

Keith Griffon @dark_firewall

Программист C#

HTML
CSS

Почему при наведении у меня сдвигается текст?

Доброго времени суток, я сделал простенькую вещь, при наведении на аватар выезжает твой ник и баланс,
но почему то когда анимация работает текст сдвигается на несколько пикселей, код ниже как исправить? и как добавить чтобы он так же закрывался в исходно положение ?

<div class="shopAvatar">
    <img src="<?php echo $userInfo["avatar"];?>" class="profileShop">
    <div class="aboutUserShop">
        <h3 class="ni"><?php echo $_SESSION['username'];?></h3>
        <h3 class="balance"><?php echo $userInfo["balance"];?> <span style="font-size:17px;">TRX</span></h3>
    </div>
    <svg class="iconWallet" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M19 7.24997H18.75V4.99997C18.7474 4.53665 18.5622 4.09305 18.2345 3.76543C17.9069 3.43781 17.4633 3.25259 17 3.24997C16.9207 3.23552 16.8393 3.23552 16.76 3.24997L4.86 7.24997H4.75H4.59L4.42 7.30997H4.28L4.12 7.39997L4 7.56997L3.86 7.68997L3.75 7.78997L3.63 7.93997C3.598 7.96867 3.57097 8.00246 3.55 8.03997C3.51288 8.09779 3.47948 8.15791 3.45 8.21997L3.39 8.32997C3.36216 8.40179 3.33878 8.47526 3.32 8.54997C3.3245 8.5865 3.3245 8.62344 3.32 8.65997C3.30967 8.77307 3.30967 8.88687 3.32 8.99997V19C3.3221 19.4515 3.49765 19.8849 3.81034 20.2106C4.12303 20.5364 4.54895 20.7295 5 20.75H19C19.4633 20.7473 19.9069 20.5621 20.2345 20.2345C20.5622 19.9069 20.7474 19.4633 20.75 19V8.99997C20.7474 8.53665 20.5622 8.09305 20.2345 7.76543C19.9069 7.43781 19.4633 7.25259 19 7.24997ZM17.08 4.75997C17.1293 4.77814 17.1719 4.81078 17.2022 4.85362C17.2325 4.89646 17.2492 4.94748 17.25 4.99997V7.24997H9.62L17.08 4.75997ZM19.25 19C19.25 19.0663 19.2237 19.1299 19.1768 19.1767C19.1299 19.2236 19.0663 19.25 19 19.25H5C4.9337 19.25 4.87011 19.2236 4.82322 19.1767C4.77634 19.1299 4.75 19.0663 4.75 19V8.99997C4.75 8.93367 4.77634 8.87008 4.82322 8.82319C4.87011 8.77631 4.9337 8.74997 5 8.74997H19C19.0663 8.74997 19.1299 8.77631 19.1768 8.82319C19.2237 8.87008 19.25 8.93367 19.25 8.99997V19Z" fill="#000000"></path> <path d="M16.5 15.25C17.1904 15.25 17.75 14.6904 17.75 14C17.75 13.3096 17.1904 12.75 16.5 12.75C15.8096 12.75 15.25 13.3096 15.25 14C15.25 14.6904 15.8096 15.25 16.5 15.25Z" fill="#000000"></path> </g></svg>
</div>

.shopAvatar {
  display: flex;
  align-items: center;
  position: relative;
  width: 90px;
  height: 90px;
  background-color: #B700FF;
  border-radius: 100px;
  margin: 2%;
  /* float: right; */
  overflow: hidden;
}

.profileShop {
  width: 90px;
  border: 3px solid #560875;
  border-radius: 50%;
  cursor: pointer;
}
.shopAvatar:hover{
  transition: 2s;
  width: 283px;
}
.aboutUserShop {
  margin-left: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  white-space: nowrap;
  margin-bottom: 3%; /* Добавлено для выравнивания по левому краю */
}

.ni, .balance {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 0; /* Добавлено для сброса отступа слева */
  word-break:keep-all;
}

.iconWallet{
  width: 40px;
  margin-left: 5%;
  background-color: #3b0750;
  border-radius: 50%;
  padding: 10px;
  align-items: center;
  cursor: pointer;
  margin-bottom: 3%;
}
.iconWallet:hover{
  transition: 2s;
  background-color: #8300ee;
  border: 3px solid #3b0750;
}