I have 16 boxes, and they are divided into 4 groups.
There is an alignment issue in my code where the 4th member of each row drops down to the next line.
I am looking to keep the 4 groups of boxes in a single row without any of them dropping down to the next line.
How can I fix this and ensure the 4 groups stay in a single line?
How can I correct this issue and keep the 4 groups in a single line?
.box {
width: calc(33.3% - 9px);
border-radius: 5px;
border:2px solid white;
margin: -2px;
background-color: #666666;
height: 10vh;
display: inline-flex;
align-items: center;
justify-content: center;
background-repeat:no-repeat;
background-size: cover;
cursor:pointer;
}
#container {
white-space:nowrap;
border:px solid #CC0000;
}
.containerr{
border:px solid #FF3399;
}
.pic{
background-size: 100% 100%;
}
.container2 {
width: 29.0vw;
position: fixed;
top: 0.9vh;
left: 19.2vw;
}
.box p {
font-size: calc(2vw + 10px);
}
p{
font: "Courier New", Courier, monospace;
font-size:15px;
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
color: #005ce6;
text-align: center;
}<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box" id="1"><p name="values">1</p></div>
<div class="box" id="2"><p name="values">2</p></div>
<div class="box" id="3"><p name="values">3</p></div>
<div class="box" id="4"><p name="values">4</p></div>
</div>
<div id="2container">
<div class="box" id="5"><p name="values">5</p></div>
<div class="box" id="6"><p name="values">6</p></div>
<div class="box" id="7"><p name="values">7</p></div>
<div class="box" id="8"><p name="values">8</p></div>
</div>
<div id="3container">
<div class="box" id="9"><p name="values">9</p></div>
<div class="box" id="10"><p name="values">10</p></div>
<div class="box" id="11"><p name="values">11</p></div>
<div class="box" id="12"><p name="values">12</p></div>
</div>
<div id="4container">
<div class="box" id="13"><p name="values">13</p></div>
<div class="box" id="14"><p name="values">14</p></div>
<div class="box" id="15"><p name="values">15</p></div>
<div class="box" id="16"><p name="values">16</p></div>
</div>
</div>
</div>
</div>