How can I get multiple columns on checkboxes?

Site URL: https://www.berbergroup.co.uk/

Right now it looks like they're adjacent but unaligned in editor mode, and then in preview mode they're not even aligned. I'm currently using the code: 

''

.form-field-checkbox-layout-stack .sqs-block-form {
  display: flex;
  flex-wrap: wrap; /* Ensures that checkboxes wrap to the next line when necessary */
  justify-content: space-between; /* Distributes the checkboxes evenly */
}

.form-field-checkbox-layout-stack .sqs-block-form .form-item.checkbox {
  display: flex;
  align-items: center; /* Aligns the checkbox and label in the middle vertically */
  flex-direction: row; /* Makes sure the checkbox and label are in a row */
  min-width: 200px; /* Sets the minimum width for each checkbox item */
  margin-bottom: 20px; /* Adds spacing between rows */
}
''

However, it's not working, can someone help? 

17 hours ago, AdamKarkar said:

Site URL: https://www.berbergroup.co.uk/

Right now it looks like they're adjacent but unaligned in editor mode, and then in preview mode they're not even aligned. I'm currently using the code: 

''

.form-field-checkbox-layout-stack .sqs-block-form {
  display: flex;
  flex-wrap: wrap; /* Ensures that checkboxes wrap to the next line when necessary */
  justify-content: space-between; /* Distributes the checkboxes evenly */
}

.form-field-checkbox-layout-stack .sqs-block-form .form-item.checkbox {
  display: flex;
  align-items: center; /* Aligns the checkbox and label in the middle vertically */
  flex-direction: row; /* Makes sure the checkbox and label are in a row */
  min-width: 200px; /* Sets the minimum width for each checkbox item */
  margin-bottom: 20px; /* Adds spacing between rows */
}
''

However, it's not working, can someone help? 

I can't see the form. Can you send me the page link where there is the form?

I think the code you're using is working as expected. 

It sets a min width but not a max width and it tells items to wrap if there's not enough space on a row. 

Manchester, Lancaster and St Helens probably take up too much width for a 200px min width item to fit alongside them and so wrapping occurs. 

Give us a link to the actual page and I or someone else will be able to help. 

https://www.berbergroup.co.uk/investment-area - here is the link to the page - you answered my question on Monday. Thanks for your help. 

7 hours ago, AdamKarkar said:

Thanks for your help. 

No probs. The page still looks weird to me - white text on a white background.