Creating column divs in JS, but they are rendering as rows instead

I am building a Jeopardy game (following a tutorial)The code is throwing no errors but my JS div element header columns for my categories are not displaying in columns they display in rows as well as my clue boxes with not properly align into columns

I have my JS script at the bottom of my page, I have deconstructed and reconstructed the code to try and pinpoint my issue with no luck.

for a visual here is the codepen link: https://codepen.io/NP27/pen/zYELarE

Code is as follows:

    <title>Document</title>
</head>
<body>
   <div class="app">
    <header class="top-header">
        <h1>Trivia Game Show</h1>
        <p class="score">Score <span class="score-count"></span></p>
    </header>

    <!--container for the board-->
  <div class="board"></div> 
    <!--categories get injected here-->
    
   

CSS:

 * {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: sans-serif;

    color: white;
    font-size: 2vw;
    text-align: center;
    padding: 1em;
    background: linear-gradient(180deg, #2e2e3a 0%, #0c0c2c 100%);

}
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-shadow: var(--text-shadow);
}

JS Script :

renderCategory(category) {
    let column = document.createElement("div");
    column.classList.add("column");

    column.innerHTML = (
       `<header>${category.title}</header><ul></ul>`
    )
   

    this.boardElement.appendChild(column);
   

    
}