My grid column isn't working in my Christmas matching game project. I'm trying to create additional card columns using grid template columns, but the other three columns are not displaying as intended. They should be positioned right next to "Time: 100", but they are not appearing. I have double-checked for any spelling errors and everything seems correct. Can someone please help me identify what I am missing?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
<title>Santa's Matching Game</title>
</head>
<body>
<h1 class="page-title">Santa's Matching Game</h1>
<!-- Game Stuff Besides Cards -->
<div class="game-container">
<div class="game-info-container">
<div class="game-info">
Time: <span id="time-remaining">100</span>
</div>
<div class="game-info">
Flips: <span id="flips">0</span>
</div>
<!-- Cards -->
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
</body>
</html>
@font-face {
font-family: "Dancing-Bold";
src: url("Assets/Fonts/Dancing-Bold.ttf") format('truetype');
}
@font-face {
font-family: "MofC-Bold";
src: url("Assets/Fonts/MofC-Bold.ttf") format('truetype');
}
* {
box-sizing: border-box;
}
html {
min-height: 100vh;
}
body {
margin: 0;
background: radial-gradient(#f2f3f8,#58b69b);
}
.page-title {
color:aliceblue;
font-family: MofC-Bold, serif;
font-weight: normal;
text-align: center;
font-size: 6em;
}
.game-info {
color: aliceblue;
font-size: 4em;
font-family: Dancing-Bold, serif;
}
.game-container {
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 10px;
}
.card {
background-color: #d33943;
height: 175px;
width: 125px;
}
This is my first time posting on Stack Overflow, so I hope I followed all the guidelines correctly.