checkbox only show when the screen is zoomed out - css

Question

I have been using a custom check box for my project. there are 5 checkboxes in a line. but in the standard view, it only shows 4 checkboxes. but when I zoomed out it will show the missing checkbox. how can I overcome this?
HTML:
<div className="checkbox-container-05">
<input id='CP5' name='3565' type='checkbox' onChange={(e)=>seatNohandleChecked(e)} className='pit-2' />
<label htmlFor='CP5' className='btn'>CP5</label>
<input id='CP6' name='3565' type='checkbox' onChange={(e)=>seatNohandleChecked(e)} className='pit-2' />
<label htmlFor='CP6' className='btn'>CP6</label>
<input id='CP7' name='3565' type='checkbox' onChange={(e)=>seatNohandleChecked(e)} className='pit-2' />
<label htmlFor='CP7' className='btn'>CP7</label>
<input id='CP8' name='3565' type='checkbox' onChange={(e)=>seatNohandleChecked(e)} className='pit-2' />
<label htmlFor='CP8' className='btn'>CP8</label>
<input id='CP9' name='3565' type='checkbox' onChange={(e)=>seatNohandleChecked(e)} className='pit-2' />
<label htmlFor='CP9' className='btn'>CP9</label>
<input id='CP10' name='3565' type='checkbox' onChange={(e)=>seatNohandleChecked(e)} className='pit-2' />
<label htmlFor='CP10' className='btn'>CP10</label>
</div>
CSS:
.checkbox-container-05 {
display: contents;
flex-direction: row;
}
.pit-2 {
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background: url(../images/event_seats_plan/freddy/pit.png);
background-size: cover;
border-radius: 1px;
box-sizing: border-box;
position: relative;
box-sizing: content-box;
width: 60px;
height: 45px;
border-width: 0;
transition: all .3s linear;
text-align: center;
right: 640px;
bottom: 740px;
display: flex;
}
Zoomed out
Normal view