How do you change the entire column background color of a grid column?

I have a grid with 2 columns. When I try to change the background color of an entire column (half of the browser window), it only changes the background behind the text. I'm also trying to add a border between the 2 columns that are created with grid, however, from what I've found online, you can't style the grid-gap. Any workarounds for this?

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

body {
  overflow: hidden;
}

.homePageButtons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100vw;
  height: 100vh;
}

.bigButton {
  place-self: center;
}

a:link {
  color: black;
}

#gaming {
  font-family: 'Audiowide', cursive;
  font-size: 5rem;
}

#volleyball {
  font-family: 'Alfa Slab One', cursive;
  font-size: 5rem;
}

.team {
  display: flex;
  justify-content: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Pink Pack Team</title>
  <link rel="stylesheet" href="index.css" />
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
</head>

<body>
  <div class="homePageButtons">
    <div id='gaming' class="bigButton">
      <a href="http://www.pinkpackteam.com/gamingteam">GAMING</a><br><a class='team' href="http://www.pinkpackteam.com/gamingteam">TEAM</a>
    </div>
    <div id='volleyball' class="bigButton">
      <a href="http://www.pinkpackteam.com/volleyballteam">VOLLEYBALL</a><br><a class='team' href="http://www.pinkpackteam.com/volleyballteam">TEAM</a>
    </div>
  </div>
</body>

</html>

Solution

Don't center the grid item, center the content inside and you can easily add background and border:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

body {
  overflow: hidden;
}

.homePageButtons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100vw;
  height: 100vh;
}

.bigButton {
  /* place-self: center;*/
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

a:link {
  color: black;
}

#gaming {
  font-family: 'Audiowide', cursive;
  font-size: 5rem;
  background: pink;
  border-right:2px solid red
}

#volleyball {
  font-family: 'Alfa Slab One', cursive;
  font-size: 5rem;
  background: lightblue;
  border-left:2px solid red
}

<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">

<div class="homePageButtons">
  <div id='gaming' class="bigButton">
    <a href="http://www.pinkpackteam.com/gamingteam">GAMING</a>
    <a class='team' href="http://www.pinkpackteam.com/gamingteam">TEAM</a>
  </div>
  <div id='volleyball' class="bigButton">
    <a href="http://www.pinkpackteam.com/volleyballteam">VOLLEYBALL</a>
    <a class='team' href="http://www.pinkpackteam.com/volleyballteam">TEAM</a>
  </div>
</div>