I only want to see the inner lines of grid, but depending on screen width, there is a line on the right that appears. I'm not sure if this is how grids work or is there a way to fix it?
.grid-container {
position: absolute;
bottom: 0px;
width: 100%;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(3, 1fr);
background-color: #000000;
padding: 0px;
}
.grid-item {
aspect-ratio: 1/1;
background-color: rgb(255, 255, 255);
padding: 4%;
padding-bottom: 0px;
font-size: 30px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="main_div">
<p>Player = </p>
<p id="player_display" style="font-size: 3rem;"></p>
<p id="winner_display"></p>
<div class=grid-container>
<div class="grid-item" id="1"></div>
<div class="grid-item" id="2"></div>
<div class="grid-item" id="3"></div>
<div class="grid-item" id="4"></div>
<div class="grid-item" id="5"></div>
<div class="grid-item" id="6"></div>
<div class="grid-item" id="7"></div>
<div class="grid-item" id="8"></div>
<div class="grid-item" id="9"></div>
</div>
</div>
<script src="./scripts.js"></script>
</body>
</html>