Tell us what’s happening:
Hello,
I’ve been sitting on my code for a while now, and I just can’t make my comments to be in line with the checkboxes. Any help would be very appreciated
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey Form></title>
<link rel="stylesheet" href="styles.css" />
</head>
<Body>
<h1 id="title">Survey Form</h1>
<p id="description">Thanks for helping us to understand you better</p>
<form id="survey-form">
<div class="survey">
<label
id="name-label"
for="name">Enter Your Name:
<input
class="text"
id="name"
name="name"
type="text"
required
placeholder="Enter your name..". />
</label>
</div>
<div class="survey">
<label
id="email-label"
for="email">Enter Your Email:
<input
id="email"
name="email"
type="email"
required
placeholder="Enter your email..."
/>
</label>
<div>
<div class="survey">
<label
id="number-label"
for="age">Enter Your Age (Years)
<input
id="number"
type="number"
name="age"
min="13"
max="120"
placeholder="Age"
/>
</label>
</div>
<fieldset>
<label
for="profession">What is your profession?
<select
name="dropdown"
id="dropdown"
name="dropdown">
<option value="">(select one)</option>
<option value="1">Student</option>
<option value="2">Self Employed</option>
<option value="3">Employed</option>
<option value="4">Not Employed</option>
</select>
</fieldset>
<fieldset>
<p>How likely you will leave and travel all over the world?</p>
<label
for="very-likely">
<input
id="very-likely"
type="radio"
name="how-likely"
class="line"
value="1"
checked
/>Very likely</label>
<label
for="not-likely">
<input
id="not-likely"
type="radio"
name="how-likely"
class="line"
value="2"
checked
/>Not likely</label>
</fieldset>
<fieldset>
<legend>What would you do if you had a 1M dollars?(check all that apply)</legend>
<label>
<input
class="inline"
type="checkbox"
id="changes"
value="1" />I would go for a worldtrip
</label>
<label>
<input
class="inline"
type="checkbox"
id="changes"
value="2"
/>I would buy a new house
</label>
<label>
<input
class="inline"
type="checkbox"
id="changes"
value="3"
/>I would buy a new car
</label>
<label>
<input
class="inline"
type="checkbox"
id="changes"
value="4"
/>I would donate all my money to charity
</label>
<label>
<input
class="inline"
type="checkbox"
id="changes"
value="5"
/>I would invest it all in stocks
</label>
<label>
<input
class="inline"
type="checkbox"
id="changes"
value="6"
/>I don't know
</label>
</fieldset>
<fieldset>
<label
for="comments">Any personal comments:
<textarea
id="comments"
name="comments"
rows="3"
cols="30"
placeholder="Put your comments here..." />
</textarea>
</label>
</fieldset>
<input
id="submit"
type="submit"
value="submit" />
</form>
</body>
</html>
/* file: styles.css */
body {
width:100%;
height: 100vh;
margin: 0;
background-color: rgb(255 127 55);
color: rgb(255 255 255);
font-family: Tahoma;
font-size: 16px;
}
form {
border: 2px solid white;
width: 70%;
margin: 0 auto;
padding: 10px;
text-align: left;
}
fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid white;
text-align: column;
}
h1, p {
margin: 1em auto;
text-align: center;
}
textarea, select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
text-align: center;
}
input[type="text"] {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
text-align: center;
}
input[type="email"] {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
text-align: center;
}
input[type="number"] {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
text-align: center;
}
input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
border-color: white;
}
.inline {
width: 40%
border: 1px solid black;
}
.line {
width: 20%
}
input[type="checkbox"] {
margin: 0%;
display: flex;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Challenge Information:
Survey Form - Build a Survey Form
