我试图使用CSS和超文本标记语言创建一个简单的页面，但似乎无法按我想要的方式对齐元素.我有一个输入元素和两个按钮，我希望按钮在输入元素下面，一个按钮与输入元素的左侧对齐，另一个按钮与输入元素的右侧对齐.
无论我做什么，我都不能让它起作用.我会提供一个代码和截图，如果有人能帮助我，我将不胜感激，提前谢谢！
超文本标记语言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>word_game</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="game_container">
<h1 class="game_title">Word Game</h1>
<div class="input_container">
<input type="text" id="word_input" placeholder="Enter your word">
<button class="btn" id="submit_btn">Submit</button>
<button class="btn" id="get_letter_btn">Get Letter</button>
</div>
</div>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
background-color: #1B1212;
margin: 0;
padding: 0;
}
.game_container {
width: 80%;
margin: 50px auto;
background-color: #36454F;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.game_title {
text-align: center;
}
.input_container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.input_container input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
.btn {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
.btn#submit_btn {
margin-right: auto;
}
.btn#get_letter_btn {
margin-left: auto;
}