Tell us what’s happening:
In my form, I have several checkboxes that should be aligned next to their labels, but the checkboxes for ‘Breakfast’ and ‘In between in the morning’ are not aligning properly with the others. Everything else is correctly aligned except for these two. What could be the cause of this misalignment, and how can I fix it to ensure they are aligned properly next to the labels?
This should help in asking for advice regarding the alignment issue.
Your code so far
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruit & Health Survey</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title"> Fruit & Health Survey</h1>
<p id="description"> Help us research healthy eating by completing this fruit survey.</p>
<div class="wrapper">
<div class="container">
<form id="survey-form">
<label id="name-label">Name
<input type="text" id="name" required placeholder="What's your name">
</label>
<label id="email-label">Email
<input type="email" id="email" required placeholder="How can we reach you?">
</label>
<label id="number-label"> Age <input type="number" id="number" min="18" max="40" required placeholder="How old are you?"></label>
<label class="fruit-intake-dropdown"> How often do you eat fruit as part of your daily diet?</label>
<select id="dropdown">
<option value="daily">
Every day, I eat fruit daily
</option>
<option value="several"> Several times a week, I eat fruit regularly</option>
<option value="occasionally"> Occasionally, I eat fruit, but not regularly</option>
<option value="rarely"> Rarely, I almost never eat fruit </option>
<option value="never"> Never, I don't eat fruit at all</option>
</select>
<label> On average, how many servings of fruit do you eat per day? </label>
<label>
<input type="radio" id="serving-1" name="serving" value="1" class="inline"> 1 serving of fruit per day
</label>
<label>
<input type="radio" id="serving-2" name="serving" value="2" class="inline"> 2 servings of fruit per day </label>
<label>
<input type="radio" id="serving-3" name="serving" value="3" class="inline"> 3 servings of fruit per day</label>
<label>
<input type="radio" id="serving-more-3" name="serving" value="more than 3 servings" class="inline"> more than 3 servings of fruit per day </label>
<label class="favorite-fruit">What is your favorite fruit?</label>
<input type="text" id="favorite-fruit" name="favorite-fruit">
<label> When do you usually eat fruit?</label>
<label>
<input type="checkbox" id="fruit-times-breakfast" name="fruit-times" value="breakfast" class="inline"> Breakfast</label>
<label>
<input type="checkbox" id="morning-fruit" name="fruit-times" value="morning" class="inline"> In between in the morning</label>
<label>
<input type="checkbox" id="lunch" name="fruit-times" value="lunch" class="inline">Lunch </label>
<label>
<input type="checkbox" id="afternoon-lunch" name="fruit-times" value="afternoon-lunch" class="inline">In between in the afternoon</label>
<label>
<input type="checkbox" id="dinner" name="fruit-times" value="dinner" class="inline">Dinner</label>
<label>
<input type="checkbox" id="evening-snack" name="fruit-times" value="evening-snack" class="inline">Evening snack</label>
<label>
<input type="checkbox" id="no-fruit" name="fruit-times" value="no-fruit" class="inline">I don't eat fruit</label>
<label class="form-label">Do you have any comments or suggestions for us? </label>
<textarea id="comments" name="comments" rows="4" cols="50" placeholder= "Enter your comments here..."></textarea>
<input type="submit" id="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
body {
width: 100%;
min-height: 100vh;
margin: 0;
background: #f9f9f9;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 16px;
}
.wrapper {
width: 100%;
min-height: auto;
padding: 20px;
background-color: #f9f9f9;;
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding: 2em;
max-width: 600px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 0 auto;
}
#title {
margin: 0.5em auto;
text-align: center;
color: #1e3a8a;
font-size: 2.5em;
font-weight: bold;
margin-bottom: 0.5em;
}
#description {
margin: 1em auto;
text-align: center;
color: #666;
font-size: 1.2em;
}
#surveyform { width: 100%;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 0;
padding-bottom: 1em;
position: relative;
}
label {
display: block;
margin: 0.5rem 0;
}
input,
textarea,
select {
margin: 10px 0 0 0;
width: 100%;
padding: 0.4em;
min-height: 2.5em;
border: 1px solid #ccc;
}
input, textarea {
background-color: #fff;
color: #333;
border: 1px solid #ccc;
}
input[type="submit"] {
display: block;
width: 100%;
padding: 10px;
margin: 1em auto;
margin-bottom: 0;
height: 2em;
font-size: 1.1rem;
background-color: #0056b3;
color: white;
border-color: white;
min-width: 300px;
cursor: pointer;
}
input[type="submit"]:hover {background-color: #003366;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
#name-label { margin-top: -20px;
}
.fruit-intake-dropdown { margin-bottom: 0px;
}
#comments {
margin-top: 0px;
}
.form-label {
margin-top: 30px;
}
.content {
padding: 20px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
Challenge Information:
Survey Form - Build a Survey Form