Displaying radiobuttons horizontally breaks the layout of selected-option

I have created a form where is radiobuttons. If I want to display them horizontally, then the selection buttons are disappearing from all except the first one. In this case, it shows only no 1, but when you click other options, it still shows no 1 to be selected. The code I have used is

.form-item.field.radio {
  display: flex;
}

When the buttons are displayed vertically, it works correctly. I have tried everyghing from grid-inline, inline e.g. in a couple of sitesbut it breaks the selections completely. Does anyone know why it does that and how to fix this? Much appreciated.

Can you share your website URL and this page?

Over here Minun sivu (squarespace.com). 

Try this code:

Not working 😞 even the option 3 is selected, it shows the square and circles around option 1.

Over here Minun sivu (squarespace.com). 

Now it works! Magnificent, thank you sooo much ! 🙂 I was fighting with this for 2 days.

Brilliant!

Can you mark my post as the solution and give it a like?