How can i override css button or checkbox placement

i am new user here and i am making a GUI but i am stuck at the placement of checkbox (styling) spacing issue when i add the toggle switch(checkbox) all my aliments for the switches gets destroyed any ideas??

        .btn-group button {
   background-color: Transparent;
    border: ;
    color: white; /* White text */
    padding: 29px 23px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    width: 10%; /* Set a width if needed */
    display: block; /* Make the buttons appear below each other */
    margin: 30px 1px;
}
<div class="btn-group">
  <button id = "camera" onclick="camera()"></button>
 <input id=pumptoggle type="checkbox" class="toggle-switch">
  <button id = "fish" onclick="fish()"></button>
  <button id = "outside" onclick="outside()"></button>
<button onclick="bulb()"></button>
</div>