Styling a specific input type with CSS not working - Build a survey form

1

Tried styling the radio buttons and checkboxes so they could be next to their labels but nothing is changing

Site link : marccodez .github.io/Movie_Survey_Form/

In the style sheet, I’m referring to this part

.form-control input[type="checkbox"] {
	display: inline-block;
	width: auto;
}

Complete CSS code

body {
	background-image: url("https://images7.alphacoders.com/550/thumb-1920-550739.jpg");

	/* Full height */
	height: 100%;
	/* Center and scale the image nicely */
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;

	color: #fff;
	text-align: center;

	font-family: Arial, Helvetica, sans-serif;
}

h1 {
	margin-bottom: 0;
}

#survey-form {
	box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.4);
	max-width: 550px;
	padding: 30px 20px;
	margin: 40px auto;
	border-radius: 10px;
	/* text-align: left; */
	background-color: rgb(0, 0, 0, 1);
	font-family: Arial, Helvetica, sans-serif;
}

.form-control {
	text-align: left;
	margin-bottom: 20px;
}

.form-control input[type="checkbox"] {
	display: inline-block;
	width: auto;
}

.form-control label {
	display: block; /* acts like a <p> tag takes up a new line and entire width */
	margin-bottom: 7px;
}

.form-control input,
.form-control select,
.form-control textarea {
	font-family: inherit;
	border: 1px solid #777;
	border-radius: 2px;
	padding: 7px;
	display: block;
	width: 100%;
}

* {
	box-sizing: border-box; /* ensures the input boxe are inside the form container */
}

button {
	background-color: grey;
	display: block;
	padding: 10px;
	font-family: inherit;
	width: 100px;
	font-size: 16px;
	border-radius: 2px;
}

HTMl full code

<!DOCTYPE html>
<html>
	<head> 
		<head>
			<link rel="stylesheet" type="text/css" href="stylesheet.css">
	</head>

	<body>
		
		<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
		<h1 id="title">Survey Form</h1>
		<p id="description">Kindly fill in the survey form below</p>

	
		<form id="survey-form">
			<div class="form-control">
			<label id="name-label">Name</label>
			<input
				id="name"
				type="text"
				placeholder="Enter your name"
				required
			/><br />
		</div>
		<div class="form-control">
			<label id="email-label">Email</label>
			<input
				id="email"
				type="email"
				placeholder="Enter your email"
				required
			/><br />
		</div>
		<div class="form-control">
			<label id="number-label">Age</label>
			<input
				id="number"
				type="number"
				placeholder="Age"
				min="10"
				max="99"
			
			/>
		</div>
		<div class="form-control">
			<label id='label-gender'>Gender</label>
			<input type="radio" id="male" name="gender" value="male" />
			<label for="male">Male</label><br />
			<input type="radio" id="female" name="gender" value="female" />
			<label for="female">Female</label><br />
			</div>
			<div class="form-control">
			<label id='actor'>
				Who is your favourite actor starring in a Thriller film?
			</label>
			<select id="dropdown" name="Select current situation">
				<option value="actor1">Christian Bale</option>
				<option value="actor2">Leonardo DeCaprio</option>
				<option value="actor3">Jake Gyllenhaal</option>
				<option value="actor4">Matthew McConaughey</option>
				<option value="actor5">Hugh Jackman</option>
				<option value="actor6">Other</option>
			</select>
		</div>
			<div class ="form-control">
			<label id="favourite">Select your favourite Thriller Movies (check all that apply)</label>
			<input type="checkbox" id="movie1" name="movie1" value="ThePrestige" />
			<label for="movie1"> The Prestige</label><br />
			<input type="checkbox" id="movie2" name="movie2" value="Inception" />
			<label for="movie2"> Inception</label><br />
			<input type="checkbox" id="movie3" name="movie3" value="Prisoners" />
			<label for="movie3"> Prisoners</label><br />
			<input type="checkbox" id="movie4" name="movie4" value="Interstellar" />
			<label for="movie4"> Interstellar</label><br />
			<input type="checkbox" id="movie4" name="movie5" value="Gonegirl" />
			<label for="movie5"> Gone Girl</label><br />
			</div>
			<div class ="form-control">
			<label id="comments">Why is your chosen movie your favourite? If you selected "Other", please metion which movie.</label>
			<textarea id="w3mission" rows="4" cols="50"> </textarea></br>
			<button id="submit" type="submit" value="Submit" >Submit</button>
		</div>
		</form>

	</body>
</html>
2

Try with this

//add '.form-control input[type="radio"]'
.form-control input[type="radio"], .form-control input[type="checkbox"] {
	display: inline-block;
	width: auto;
}

.form-control label {
//remove display: block
	margin-bottom: 7px;
}

In <label id='label-gender'>Gender</label>, change <span> to another like < p> or <h#> to add a line break, or just add <br> below

3

Ty for existing! It worked !! Happy Easter!