Showing 4 images in each row for two rows while using Javascript For Loops to write HTML and CSS code

I am trying to have a page where I can have image selection, so I have used a for loop in javascript to write HTML and CSS but I need to be able to have four pictures on one row and four other pictures on another row and I can't seem to be able to. I've even added a div tag and use flexbox in css for that div tag and it doesn't seem to work. Could someone please help?

Here is my HTML with script in-line:

<script> let imgArray = [             ["./img/Adventure.jpg", "Adventure"],             ["./img/Girls Trip.jpg", "Girls Trip"],             ["./img/Nightlife.jpg", "Night Life"],             ["./img/Relax.jpg","Relax"],             ["./img/Winery.jpg","Winery"],             ["./img/Shopping.jpg","Shopping"],             ["./img/Romance.jpg","Romance"],             ["./img/Sport.jpg","Sport"]      ];       for (let i = 0; i < imgArray.length; i++) {        // create a new DIV        let newDiv = document.createElement("div");        newDiv.class="divcell";          let img = document.createElement("img");          img.src = imgArray[i][0];          img.style.width = "276px";          img.style.height = "221px";          img.style.margin = "10px";          img.addEventListener('click', function() {            if(img.style.border === "2px solid blue"){                 img.style.border = "none";                 return;            }            img.style.border = "2px solid blue";          });          newDiv.appendChild(img);            let div = document.createElement("div");            div.innerHTML = imgArray[i][1];            div.style.margin = "5px";            div.style.padding = "5px";            // document.getElementById('imgContainer').appendChild(div);            newDiv.appendChild(div);            document.getElementById('imgContainer').appendChild(newDiv);      }</script>//Here is my CSS with script in-line:.imgContainer {    height: 100%;    display: flex;          /* Use flexbox to lay out*/    justify-content: center; /* Center horizontally */    align-items: center;     /* Center vertically */    text-align: center;      /* Center text elements */    flex-direction: row;  /* Stack children horizontally */    flex-wrap: wrap;    align-content: center;    gap: 10px 20px;    width: 100%;}

Here is what I'm expecting the output to look like (https://i.sstatic.net/xFWvxATi.png)

Here is the actual result right now: Pictures stacked vertically (https://i.sstatic.net/CSWwWcrk.png)