Why can’t I get this refresh page button to appear below the div above it and not on top of it?

This is driving me crazy, and I asked several people who are far more experienced with coding than I am, and after a few suggestions that didn't work the most I got was "I don't know, CSS sucks, sorry." I have a refresh page button below a game board on a page, nothing more. I just want that button to appear below the game board, not over the bottom of it or above it, or way off to the left. I was wondering if I'm somehow restricting the size of the page so that there's no room for the button to move down further. But I don’t see where that'd be happening (I'm very inexperienced).

The relevant HTML & CSS (tried a bunch of combinations with the CSS, this has gotten me the closest):

<div id="gameArea">
    <table id="gameBoard"></table>
</div>

<div id="button">
      <button type="button" class="btn btn-warning" onClick="window.location.reload();">Refresh Page</button>
</div>

#gameArea {
  position: relative;
}

#gameBoard {
  position: absolute;
  margin-left: 25%;
  margin-right: 25%;
  margin-bottom: 10px;

button {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -104.5px; 
  margin-top: 1px;
}

In short, you would only need position absolute if the element needs to be shown in a place that isn't logical when you look at it from the HTML code. But in your case the position makes complete sence. You want to show your gameBoard first and after that you want to show your button below it. So you just program the board and afterwards you program the button. And at those places you just want to align the elements horizontal. You won't need position: absolute for this.

/* Borders can be removed*/
*{
  box-sizing: border-box;
}

#completeView {
  border: solid 5px red;
  width: 100%;
}

#gameArea {
  border: solid 5px blue;
  width: 100%;
}

#gameBoard {
  /* Give this the table the preferred width and let the Browser automaticcly determen what the margin should be on the left side and right side. This way it will be equally divided and positioned in the middle */
  border: solid 5px green;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  margin-bottom: 25px;
}

#buttonArea {
  /*the div is 100%, but it's content, a text-button should be in the center, so use text-align*/
  border: solid 5px orange;  
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

<div id="completeView">
  <div id="gameArea">
    <table id="gameBoard">
           <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
           <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
    </table>
  </div>

  <div id="buttonArea">
        <button type="button" class="btn btn-warning" onClick="window.location.reload();">Refresh Page</button>
  </div>
</div>

Use a negative bottom value for absolutely positioned elements to go under the bottom border of their relatively positioned parent element.