我有一个白色的盒子，我正在用它做一个文字游戏.当我调整浏览器窗口以缩小视区时，框不会移动到中心或缩小，它几乎会滑动.
我希望它像Wordle一样工作，因为即使你缩小浏览器，网格也保持不变.
有人能帮我解释一下我的css定位有哪些错误吗？
* {
padding:0;
margin:0;
}
body{
margin: 0;
padding: 0;
font-family: 'Figtree', sans-serif;
font-family: 'Inter', sans-serif;
font-family: 'Montserrat', sans-serif;
background: #212529;
}
.wrapper{
margin-top: 120px;
align-content: center;
position: fixed;
left:400px;
padding: 0px 80px;
background: white; opacity: 1;
border-radius: 10px;
box-shadow: 0 3px 5px rgba(0,0,0,0.5);
max-width: 500px;
max-height: 500px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="guesses-text">0/10</div>
<hr class="bum">
<div class="inputs">
<input type="text" class="exterior-letters">
<input type="text" class="interior-letters">
<input type="text" class="interior-letters">
<input type="text" class="interior-letters">
<input type="text" class="exterior-letters">
</div>
</div>
</div>
</body>
</html>我try 过使用"Display:Flex；"和其他方法，但都不起作用.