我正在制作一个网站，我已经添加了一个按钮，当悬停时字母间距会略有增加，问题是当这种情况发生时，字母宽度会增加按钮向右的宽度，使其偏离未悬停时的位置.
运行它，明白我的意思，我希望按钮变得更宽，但保持其中心位置，就像标题一样，我该如何做到这一点？
代码:
header {
background: rgb(53,65,83);
margin:-8px;
padding: 10px;
font-weight: 600;
color:aliceblue;
letter-spacing: 1cap;
align-content: center;
}
body {
font-family:Verdana, Geneva, Tahoma, sans-serif;
background-color: rgb(240, 241, 248);
}
button {
margin-left:20px;
font-weight: 500;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
border-radius: 4px;
color: white;
background-color: rgb(42, 43, 54);
transition-duration: 0.4s;
border: 1px solid rgb(42, 43, 54);
float: left;
}
button:hover {
letter-spacing: 2px;
font-weight: 700;
background-color: rgb(184, 186, 203);
color: rgb(42, 43, 54);
}
button:active {
scale: 90%;
}
.buttons {
align-content: center;
}
h4 {
width: fit-content;
padding: 5px;
border-radius: 4px;
box-shadow: -2px 2px 5px rgb(138, 138, 138);
transform: translateY(0px);
border: 3px double rgb(153, 156, 181);
background-color: rgb(238, 238, 238);
transition: transform 0.4s, border 0.4s, background-color 0.4s;
}
h4:hover {
transform: translateY(4px);
border: 3px double rgb(111, 112, 126);
transition: transform 0.4s, border 0.4s, 0.4s;
}
h4::selection {
color: white;
background-color: black;
}
.title {
text-align: center;
width: fit-content;
user-select: none;
margin-left: auto;
margin-right: auto;
letter-spacing: 0px;
transition: letter-spacing 0.2s;
}
.title:hover {
letter-spacing: 5px;
transition: letter-spacing 0.2s;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>J-ak-e</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<div class="buttons">
<button>Socials</button>
</div>
<div class="title">J-ak-e</div>
</header>
<h4>About me:</h2>
</body>
</html>