How can I even up my buttons and add a space between every 5th and 6th button?

Question

I have these buttons set up over a frame

I need some space between buttons 1-5 and buttons 6-10 on every row of buttons to match up with the image. I have tried placing some margin on the 6th button but that pushes the other 5 buttons to the left and out of frame. I can't quite figure out how to add the divider down the center and even these buttons up on each square in my guide (the image frame). Any help is appreciated.

They are generated using the following JS code:

 var containerDiv = document.querySelector("#main"); let tempCounterBtn = 0; for (let i = 0; i < 7; i++) { let newDiv = document.createElement("div"); newDiv.id = "div-" + (i + 1); containerDiv.appendChild(newDiv); for (let x = 0; x < 10; x++) { let btn = document.createElement("button"); btn.id = "button-" + (tempCounterBtn + 1); tempCounterBtn++; newDiv.appendChild(btn); } }

 button { background: rgba(0, 0, 0, 0.2); color: #a5afaa; border: 3.5px solid transparent; /* border-top: 1px solid; */ /* box-shadow: 0 0.1em 0.1em 0.1em black; */ border-radius: 10px; padding: 2.5em 2.5em; /* transition: all 0.1s; */ /* position: absolute; */ } button:hover { border-color: #fff8cc; border: 3.5px solid; color: #fff8cc; box-shadow: 0em 0em 1em 0em #fff8cc; cursor: url('Pictures/gloveCursor.png'), auto; } .wrapper { align-items: center; display: flex; flex-direction: column; justify-content: center; } #main { position: absolute; align-items: center; display: flex; flex-direction: column; justify-content: center; margin-top: 27px; margin-right: 10px; } #itemFrame { position: relative; height: 700px; width: 100%; }

 <div class="wrapper"> <img id="itemFrame" src="Pictures/ItemFrame.png" alt=""> <div id="main"></div> </div>

Answer 1

You just need to insert a margin on every tenth button, starting from a -5 offset.

#main div button:nth-child(10n-5) {
    margin-right: 1em;
}

#main div {
    white-space: nowrap;
}

Since each div contains 10 buttons, an alternative to nth-child , is to directly apply a margin to the 5th button

#main div button:first-child + button + button + button + button {
    margin-right: 1em;
}

 var containerDiv = document.querySelector("#main"); let tempCounterBtn = 0; for (let i = 0; i < 7; i++) { let newDiv = document.createElement("div"); newDiv.id = "div-" + (i + 1); containerDiv.appendChild(newDiv); for (let x = 0; x < 10; x++) { let btn = document.createElement("button"); btn.id = "button-" + (tempCounterBtn + 1); tempCounterBtn++; newDiv.appendChild(btn); } }

 button { background: rgba(0, 0, 0, 0.2); color: #a5afaa; border: 3.5px solid transparent; /* border-top: 1px solid; */ /* box-shadow: 0 0.1em 0.1em 0.1em black; */ border-radius: 10px; padding: 2.5em 2.5em; /* transition: all 0.1s; */ /* position: absolute; */ } button:hover { border-color: #fff8cc; border: 3.5px solid; color: #fff8cc; box-shadow: 0em 0em 1em 0em #fff8cc; cursor: url('Pictures/gloveCursor.png'), auto; } .wrapper { align-items: center; display: flex; flex-direction: column; justify-content: center; } #main { position: absolute; align-items: center; display: flex; flex-direction: column; justify-content: center; margin-top: 27px; margin-right: 10px; } #itemFrame { position: relative; height: 700px; width: 100%; } #main div button:nth-child(10n-5) { margin-right: 1em; } #main div { white-space: nowrap; }

 <div class="wrapper"> <img id="itemFrame" src="Pictures/ItemFrame.png" alt=""> <div id="main"></div> </div>