我正在使用 CSS 网格来设计我的网站。但是，当我添加背景颜色（希望它能覆盖整个网格）时，它只覆盖了每个网格项目中的一部分。这就是我想要的 CSS 网格结构。我希望每个网格单元格都被完全填充而不是每个单元格都被颜色完全填充，似乎只有一部分是
我是 CSS 网格的新手，所以我愿意接受任何建议
HTML：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index.css"/>
<style>
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
background-color: #ff9900;
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
</div>
<div id="main">
<div class="howto"><span style="cursor:pointer" onclick="openNav()"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle-fill" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</svg></span></div>
<div class="play"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"/>
</svg></div>
<div class="lightmode"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
</svg></div>
<div class="donate"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-piggy-bank-fill" viewBox="0 0 16 16">
<path d="M7.964 1.527c-2.977 0-5.571 1.704-6.32 4.125h-.55A1 1 0 0 0 .11 6.824l.254 1.46a1.5 1.5 0 0 0 1.478 1.243h.263c.3.513.688.978 1.145 1.382l-.729 2.477a.5.5 0 0 0 .48.641h2a.5.5 0 0 0 .471-.332l.482-1.351c.635.173 1.31.267 2.011.267.707 0 1.388-.095 2.028-.272l.543 1.372a.5.5 0 0 0 .465.316h2a.5.5 0 0 0 .478-.645l-.761-2.506C13.81 9.895 14.5 8.559 14.5 7.069c0-.145-.007-.29-.02-.431.261-.11.508-.266.705-.444.315.306.815.306.815-.417 0 .223-.5.223-.461-.026a.95.95 0 0 0 .09-.255.7.7 0 0 0-.202-.645.58.58 0 0 0-.707-.098.735.735 0 0 0-.375.562c-.024.243.082.48.32.654a2.112 2.112 0 0 1-.259.153c-.534-2.664-3.284-4.595-6.442-4.595Zm7.173 3.876a.565.565 0 0 1-.098.21.704.704 0 0 1-.044-.025c-.146-.09-.157-.175-.152-.223a.236.236 0 0 1 .117-.173c.049-.027.08-.021.113.012a.202.202 0 0 1 .064.199Zm-8.999-.65a.5.5 0 1 1-.276-.96A7.613 7.613 0 0 1 7.964 3.5c.763 0 1.497.11 2.18.315a.5.5 0 1 1-.287.958A6.602 6.602 0 0 0 7.964 4.5c-.64 0-1.255.09-1.826.254ZM5 6.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/>
</svg></div>
<div class="body textcenter">box</div>
</div>
<script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
</body>
</html>
CSS：
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #000000;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #ff9900;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #fbc67d;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
display: grid;
grid-template-columns: 15fr repeat(4, 1fr) 15fr;
grid-template-rows: 1fr 6fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.body { grid-area: 2 / 1 / 3 / 7; }
.howto { grid-area: 1 / 2 / 2 / 3; }
.textcenter {
display: flex;
align-items: center;
justify-content: center;
background-color: #fbc67d;
}
.bi-info-circle-fill {
transition: 0.3s;
display: flex;
align-items: center;
justify-content: center;
background-color: #976825;
}
.bi-play-circle-fill {
transition: 0.3s;
display: flex;
align-items: center;
justify-content: center;
background-color: #976825;
}
.bi-circle-half {
transition: 0.3s;
display: flex;
align-items: center;
justify-content: center;
background-color: #976825;
}
.bi-piggy-bank-fill {
transition: 0.3s;
display: flex;
align-items: center;
justify-content: center;
background-color: #976825;
}
.bi-info-circle-fill:hover {
filter: invert(100%);
}
.bi-play-circle-fill:hover {
filter: invert(100%);
}
.bi-circle-half:hover {
filter: invert(100%);
}
.bi-piggy-bank-fill:hover {
filter: invert(100%);
}
.play { grid-area: 1 / 3 / 2 / 4; }
.lightmode { grid-area: 1 / 4 / 2 / 5; }
.donate { grid-area: 1 / 5 / 2 / 6; }
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}