Two of more checkboxes stays in one line and the rest goes to next line

November 20, 2022

I don’t really know why it behaves like that. I tried to prevent checkbox label from wrapping to opposite side of page using display: inline-block; and it works but for some reason two checkboxes stays in first line and the rest goes down.

enter image description here

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  font-family: Tahoma;
  background-color: #1d3557;
  font-size: 16px;
  color: white;
}
h1, p {
  margin: 1em auto;
  text-align: center;
}
form {
  width: 60vw;
  min-width: 300px;
  max-width: 500px;
  margin: 0 auto;
  /* background-color: #F7DBA7; */
}
label {
  display: block;
}
.in-line {
  display: inline-block;
  margin: 0 5px 0 0;
}
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]), textarea, select {
  width: 100%;
  margin: 5px 0 10px 0;
  min-height: 2em;
  background-color: #457b9d;
  border: 1px solid #1d3557;
  color: white;
  
}
fieldset {
  border: 0;
  border-bottom: 2px solid #e63946;
  margin: auto;
}
.submit {
  display: block;
  width: 60%;
  height: 2em;
  margin: 1em auto;
  background-color: #457b9d;
  border-color: #1d3557;
  font-size: 1.1rem;
  color: white;
  font-family: tahoma;
}
::placeholder {
  color: white;
}
fieldset:first-of-type {
  border-top: 2px solid #e63946
}
.text-size {
  font-size: 0.9em;
}
input[type="checkbox"] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Customer Survey</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="title">Byens Pizza House Customer Survey</h1>
  <p id="description">We are happy that you chose us! Please answer these short questions and help us improve for you!</p>
<!-- SURVEY -->
  <form id="survey-form" method="post" action="">
<!-- NAME/EMAIL/GUESTS -->
    <fieldset>
      <label id="name-label" for="name-label">Your name: <input id="name" name="name-label" type="text" placeholder="James Smith" required></label>
      <label id="email-label" for="email-label">Email: <input id="email" name="email-label" type="email" placeholder="example@domain.com" required></label>
      <label id="number-label" for="number-label">Number of guests: <input id="number" name="number-label" type="number" min="1" max="20" placeholder="2" required></label>
    </fieldset>
<!-- TYPE OF FOOD -->
    <fieldset>
      Type of food you ordered:
      <label for="type-of-food" class="text-size">
        <label class="in-line" for="pizza"><input id="pizza" type="checkbox" name="type-of-food" value="Pizza" checked>Pizza</label>
        <label class="in-line" for="burgers"><input id="burgers" type="checkbox" name="type-of-food" value="Burgers">Burgers</label>
        <label class="in-line" for="pasta"><input id="pasta" type="checkbox" name="type-of-food" value="Pasta">Pasta
        <label class="in-line" for="seafood"><input id="seafood" type="checkbox" name="type-of-food" value="Seafood">Seafood</label>
        <label class="in-line" for="sandwiches"><input id="sandwiches" type="checkbox" name="type-of-food" value="Sandwiches">Sandwiches</label>
        <label class="in-line" for="salads"><input id="salads" type="checkbox" name="type-of-food" value="Salads">Salads</label>
        <label class="in-line" for="desserts"><input id="desserts" type="checkbox" name="type-of-food" value="Desserts">Desserts</label>
        <label class="in-line" for="beverage"><input id="beverage" type="checkbox" name="type-of-food" value="Beverage">Beverage</label>
      </label>
    </fieldset>
<!-- DELI/PICKUP/INSIDE -->
    <fieldset>
      Delivery method:
      <label for="delivery" class="text-size"><input id="delivery" type="radio" name="delivery-method" value="delivery" checked> Delivery</label>
      <label for="pickup" class="text-size"><input id="pickup" type="radio" name="delivery-method" value="pickup"> Pickup</label>
      <label for="inside" class="text-size"><input id="inside" type="radio" name="delivery-method" value="inside"> Inside</label>
    </fieldset>
<!-- COMMENT/REFERRER/RATE -->
    <fieldset>
      <label for="comment">Any thoughts?: <textarea id="comment" name="comment" rows="3" cols="30" placeholder="I liked spicy menu and choice of beverage..."></textarea></label>
      <label for="referrer">How did you hear about us? 
        <select id="referrer" name="referrer">
          <option value="">(select one)</option>
          <option value="1">Social Media</option>
          <option value="2">From a friend</option>
          <option value="3">Leaflet</option>
          <option value="4">Other</option>
        </select>
      </label>
      <label for="satisfaction">Are you satisfied with our service?
        <select id="dropdown" name="satisfaction">
          <option value="">(select one)</option>
          <option value="1">I am very satisfied!</option>
          <option value="2">Service was ok.</option>
          <option value="3">Not satisfied nor dissatisfied.</option>
          <option value="4">I am dissatisfied.</option>
          <option value="5">Sevice was terrible.</option>
        </select>
      </label>
    </fieldset>
    <label><input id="submit" type="submit" value="Submit" class="submit"></label>
  </form>
</body>
</html>

Im working on my first learning project and don’t know any possible solution for this.

>Solution :

you dont close your pasta label

<label class="in-line" for="pasta"><input id="pasta" type="checkbox" name="type-of-food" value="Pasta">Pasta

This might cause the break.

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  font-family: Tahoma;
  background-color: #1d3557;
  font-size: 16px;
  color: white;
}
h1, p {
  margin: 1em auto;
  text-align: center;
}
form {
  width: 60vw;
  min-width: 300px;
  max-width: 500px;
  margin: 0 auto;
  /* background-color: #F7DBA7; */
}
label {
  display: block;
}
.in-line {
  display: inline-block;
  margin: 0 5px 0 0;
}
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]), textarea, select {
  width: 100%;
  margin: 5px 0 10px 0;
  min-height: 2em;
  background-color: #457b9d;
  border: 1px solid #1d3557;
  color: white;
  
}
fieldset {
  border: 0;
  border-bottom: 2px solid #e63946;
  margin: auto;
}
.submit {
  display: block;
  width: 60%;
  height: 2em;
  margin: 1em auto;
  background-color: #457b9d;
  border-color: #1d3557;
  font-size: 1.1rem;
  color: white;
  font-family: tahoma;
}
::placeholder {
  color: white;
}
fieldset:first-of-type {
  border-top: 2px solid #e63946
}
.text-size {
  font-size: 0.9em;
}
input[type="checkbox"] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

And html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Customer Survey</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="title">Byens Pizza House Customer Survey</h1>
  <p id="description">We are happy that you chose us! Please answer these short questions and help us improve for you!</p>
<!-- SURVEY -->
  <form id="survey-form" method="post" action="">
<!-- NAME/EMAIL/GUESTS -->
    <fieldset>
      <label id="name-label" for="name-label">Your name: <input id="name" name="name-label" type="text" placeholder="James Smith" required></label>
      <label id="email-label" for="email-label">Email: <input id="email" name="email-label" type="email" placeholder="example@domain.com" required></label>
      <label id="number-label" for="number-label">Number of guests: <input id="number" name="number-label" type="number" min="1" max="20" placeholder="2" required></label>
    </fieldset>
<!-- TYPE OF FOOD -->
    <fieldset>
      Type of food you ordered:
      <label for="type-of-food" class="text-size">
        <label class="in-line" for="pizza"><input id="pizza" type="checkbox" name="type-of-food" value="Pizza" checked>Pizza</label>
        <label class="in-line" for="burgers"><input id="burgers" type="checkbox" name="type-of-food" value="Burgers">Burgers</label>
        <label class="in-line" for="pasta"><input id="pasta" type="checkbox" name="type-of-food" value="Pasta">Pasta</label>
        <label class="in-line" for="seafood"><input id="seafood" type="checkbox" name="type-of-food" value="Seafood">Seafood</label>
        <label class="in-line" for="sandwiches"><input id="sandwiches" type="checkbox" name="type-of-food" value="Sandwiches">Sandwiches</label>
        <label class="in-line" for="salads"><input id="salads" type="checkbox" name="type-of-food" value="Salads">Salads</label>
        <label class="in-line" for="desserts"><input id="desserts" type="checkbox" name="type-of-food" value="Desserts">Desserts</label>
        <label class="in-line" for="beverage"><input id="beverage" type="checkbox" name="type-of-food" value="Beverage">Beverage</label>
      </label>
    </fieldset>
<!-- DELI/PICKUP/INSIDE -->
    <fieldset>
      Delivery method:
      <label for="delivery" class="text-size"><input id="delivery" type="radio" name="delivery-method" value="delivery" checked> Delivery</label>
      <label for="pickup" class="text-size"><input id="pickup" type="radio" name="delivery-method" value="pickup"> Pickup</label>
      <label for="inside" class="text-size"><input id="inside" type="radio" name="delivery-method" value="inside"> Inside</label>
    </fieldset>
<!-- COMMENT/REFERRER/RATE -->
    <fieldset>
      <label for="comment">Any thoughts?: <textarea id="comment" name="comment" rows="3" cols="30" placeholder="I liked spicy menu and choice of beverage..."></textarea></label>
      <label for="referrer">How did you hear about us? 
        <select id="referrer" name="referrer">
          <option value="">(select one)</option>
          <option value="1">Social Media</option>
          <option value="2">From a friend</option>
          <option value="3">Leaflet</option>
          <option value="4">Other</option>
        </select>
      </label>
      <label for="satisfaction">Are you satisfied with our service?
        <select id="dropdown" name="satisfaction">
          <option value="">(select one)</option>
          <option value="1">I am very satisfied!</option>
          <option value="2">Service was ok.</option>
          <option value="3">Not satisfied nor dissatisfied.</option>
          <option value="4">I am dissatisfied.</option>
          <option value="5">Sevice was terrible.</option>
        </select>
      </label>
    </fieldset>
    <label><input id="submit" type="submit" value="Submit" class="submit"></label>
  </form>
</body>
</html>