Yet again, CSS being problematic again

So basically this is Day 3 (other days, I pretty much did nothing to complete the game) of making a game from HTML5. So I’m making a moves system right now, and I guess I’m doing well? (mainly because I’m not sure if I provided the user with too many moves…) But the thing about it is that, I’m kinda having ANOTHER styling issue.

As you can see in the image: I’ve CLEARLY set dimensions up for the headerDisplay class/id, but NO, it goes out of the div’s dimensions and even goes on the grid. I’m also aiming for the time and moves text to be stuck right on top of the grid, similarly to how the word bank is stuck to the bottom of the grid.

I was also aiming for a button that says refresh right under the word bank, however no matter what I tried, the button would just be right the score text, which looks like this:

When I am aiming for this:

Can anyone please help me? All help is appreciated.

Code:

<div class="content" id="content">
    <div class="headerDisplay" id="headerDisplay">
    </div>
    <div class="gameArea" id="gameArea">
    </div>
    <div class="wordBank" id="wordBank">
    </div>
    <div class="bottomMenu" id="bottomMenu">
    </div>
  </div>

::before,
    ::after {
      box-sizing: border-box;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    .content {
      display: grid;
      grid-template-rows: repeat(3, max-content);
      margin-block: 1em;
      margin-inline: auto;
      width: 512px;
    }
    .bottomMenu {
      font-size: 24px;
      text-align: right;
    }
    .wordBank {
      border: 2.5px solid #000;
      border-radius: 5px;
      display: flex;
      font-size: 1.6em;
      min-height: 3em;
      justify-content: space-between;
      padding: 0.25em;
    }
    
    .wordBank span:nth-child(even) {
      align-self: end;
    }
    
    .gameArea {
      font-size: 0;
      justify-self: center;
      max-width: 100%;
    }
    
    .cell {
      border: 1px solid black;
      width: 50px;
      font-size: 1rem;
      height: 50px;
      display: inline-block;
    }

    .headerDisplay {
      width: 100%;
      height: 76.8px;
      text-align: right;
      font-size: 1.6em;
    }

let score = 0;
const headerDisplay = document.getElementById("headerDisplay")
const bottomMenu = document.getElementById("bottomMenu");
const wordBank = document.getElementById("wordBank")
const gameArea = document.getElementById("gameArea")
const rows = document.getElementsByClassName("gridRow");
const cells = document.getElementsByClassName("cell");
const words = [ // snippet
  "ability",
  "able",
  "about",
  "above",
  "abroad",
  "absence",
  "absent",
  "absolute",
  "accept",
  "accident",
  "accord",
  "account",
  "accuse",
  "accustom",
  "ache",
  "across",
  "act"
]
let selectedWords = [];
bottomMenu.innerHTML = "<p>Score: " + score;
bottomMenu.innerHTML += "<button>Refresh"
while (selectedWords.length < 5) {
  const selectedWord = words[Math.floor(Math.random() * words.length)];
  if (selectedWord.length <= 9) {
    wordBank.innerHTML += "<span>" + selectedWord + "</span>"
    selectedWords.push(selectedWord);
  }
}
let longestWord = selectedWords.reduce((a, b) => a.length < b.length ? b : a, "")
let charCount = longestWord.length
var moves = charCount * 5
headerDisplay.innerHTML += "<p>Time: "
headerDisplay.innerHTML += "<p>Moves: " + moves
function makeRows(rowNum) {
  for (let r = 0; r < rowNum; r++) {
    let row = document.createElement("div");
    gameArea.appendChild(row).className = "gridRow";
  }
}

function makeColumns(cellNum) {
  for (let i = 0; i < rows.length; i++) {
    for (let j = 0; j < cellNum; j++) {
      let newCell = document.createElement("div");
      rows[j].appendChild(newCell).className = "cell";
    }
  }
}

function defaultGrid() {
  makeRows(charCount);
  makeColumns(charCount);
}
defaultGrid();