Arranging checkboxes in HTML, CSS [closed]

So I'll start by saying that I'm new to coding, currently doing the freeCodeCamp 'Responsive Web Design' Survey Form project. The problem that I'm having is with the checkboxes. My goal is to have them stacked vertically on the left, with even spacing. I've spent a couple days just googling and trying various things, experimenting with display and position elements, trying out even copying over the code from the example, to no avail. The only thing I've found that makes the checkboxes do exactly what I want is when I accidentally put a period in front of my input style in my css, but that messed all the other stuff up. Feeling a little lost, any help would be greatly appreciated. Here is my code so far (apologies for the messy code):

    <div class="form-group">
       <div class="genre-section">
       <p id="favourite-genre">What is your favourite genre of movie?</p>
         <p class="clue2">(Check all that apply)</p>
         <div id="checkboxformat">
          <label
        ><input
          name="prefer"
          value="action"
          type="checkbox"
          class="input-checkbox"
        />Action</label
      >
      <label>
        <input
          name="prefer"
          value="comedy"
          type="checkbox"
          class="input-checkbox"
        />Comedy</label
      >
      <label
        ><input
          name="prefer"
          value="drama"
          type="checkbox"
          class="input-checkbox"
        />Drama</label
      >
      <label
        ><input
          name="prefer"
          value="fantasy"
          type="checkbox"
          class="input-checkbox"
        />Fantasy</label
      >
      <label
        ><input
          name="prefer"
          value="horror"
          type="checkbox"
          class="input-checkbox"
        />Horror</label
      >
     </div>
   </div>
 </div>
 
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');

:root {
  --color-white: #f3f3f3;
  --color-darkblue: #1b1b32;
  --color-darkblue-alpha: rgba(27, 27, 50, 0.8);
  --color-green: #37af65;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-white);
  margin: 0;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: var(--color-darkblue);
  background-image: linear-gradient(
      1deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)
    ),
    url(https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

label {
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

#favourite-genre {
  margin: 3px 23px;
  font-size: 23px;
}

.clue2 {
  margin-top: 0.2px;
  margin-bottom: 23px;
  margin-left: 1.6rem;
  font-size: 0.9rem;
  color: #e4e4e4;
}

.form-group {
  display: grid;
  line-height: 30px; 
}

input {
  margin: 0 auto; width: 93%;
  height: 30px;
  border-radius: 5px;
  vertical-align: baseline;
}

.input-checkbox {
  display: inline-block;
  margin-right: 0.625rem;
  min-height: 1.25rem;
  min-width: 1.25rem;
}
    
#checkboxformat {
  
}

.genre-section {
  margin: 10px 0px
}
</style>

Here's the freeCodeCamp example:

```https://codepen.io/freeCodeCamp/pen/VPaoNP```