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