Radio buttons not properly aligned

MY HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survey form</title>
    <link rel="stylesheet" href="./survey.css">
</head>
<body>
  <div class="description">
    <h1 id="title">
        Food Survey Form
        </h1>
        <div id="boxStyling"><p>Research for the food eating 
        behavior in Sweden</p></div>
    </div>
    <div>
        <form id="survey-form" for="name">
            <div class="formStyling"> <label id="name-label">Name<br></label>
                <input type="text" 
                name="name" id="name" 
                placeholder="Enter name" required>
            </div>

            <div class="formStyling"> <label id="email-label">Email<br></label>
                <input type="email" 
                name="email" id="email" 
                placeholder="Enter email" required>
            </div>

            <div class="formStyling"> <label id="age-label">Age(optional)<br></label>
                <input type="number" 
                name="age" id="age" 
                placeholder="Enter age" min="10" max="150">
            </div>
            <div>
                <p>Select your primary diet</p>
                <select name="role" id="dropdown">
                    <option disabled selected value>Select your option</option>
                    <option value="carnivore">Carnivore</option>
                    <option value="vegna">Vegan</option>
                    <option value="Omnivore">Omnivore</option>
                    <option value="pescatarian">pescatarian</option>
                </select>
            </div>
            <div class="formStyling">
                <p>What is your prefered dietary style?</p>
                <label class="radiobuttons">
                    <input type="radio" name="preferences" 
                    class="input-radio" 
                    value="ketogenic">ketogenic
                </label>

                <label class="radiobuttons">
                    <input type="radio" name="preferences" 
                    class="input-radio" 
                    value="LCHF">LCHF
                </label>

                <label class="radiobuttons">
                    <input type="radio" name="preferences" 
                    class="input-radio" 
                    value="High Carb diet">High Carb diet
                </label>

                <label class="radiobuttons">
                    <input type="radio" name="preferences" 
                    class="input-radio" 
                    value="unsure">I don't know
                </label>
            </div>
        </form>
    </div>
</body>

</html>

My CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');

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

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* Styling the background image and background properties */
body {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-black);
    margin: 0;
    text-align: center;
  }

  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    background: var(--color-darkblue);
    background-image: linear-gradient(
        115deg,
        rgba(24, 192, 19, 0.8),
        rgba(171, 207, 176, 0.486)
      ),
      url("./mat.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
/********************************************/

/* Styling for the header and the paragraph explaining what the survey is about */
  .description{
      text-align: center;
      justify-content: center;
      align-items: center;
      color: black;
      font-weight: bolder;
  }
/********************************************/

/* Also sets the background styling for the forms */
#survey-form{
    border: 3px solid;
    border-color: rgb(105, 161, 105);
    background-color: rgba(60, 99, 65, 0.486);
    box-sizing: border-box;
    margin-left:150px;
    margin-right: 150px;
    padding: 10px;
    border-radius: 200px;
    
}
/********************************************/

/* IDs & classes for all the forms and styling*/

.formStyling{
    margin: 25px;
    padding: 5px;
}

#name{
    border-radius: 4px;
    width:300px;
    height: 25px;
}

#email{
    border-radius: 4px;
    width:300px;
    height: 25px;
}

#age{
    border-radius: 4px;
    width:300px;
    height: 25px;
}


#dropdown{
    border-radius: 4px;
    width:300px;
    height: 25px;
}



/*
.radiobuttons{
    display: block;
    vertical-align: middle;
}   
.input-radio{}
*/
/********************************************/

But my problem is that the buttons are ALL WAY to the left. I don’t have a clue on how to solve this. I know that the radio buttons are a inline element and that is why when I turn it into a block element it acts weird

I know that I can change the margin properties, but I want a vertical and horizontal alignment on the radio buttons

Not tested, but I’d try this:

.radiobuttons {
  display:block;
  max-width:300px;
  margin:0 auto;
}

Okay thanks! Will try it out!

Don’t Repeat Yourself, these are all equal, make a class and add the class to the for elements