Tell us what’s happening:
I am attempting to set the display of my ‘div’ elements to ‘block’ - but it is not working.
div {
display: block;
}
If I target individual elements, such as ‘input’ or ‘label’, and set the display to ‘block’ , then it works.
Can someone please help me? I’ve spent hours trying to figure this ONE thing out.
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<header class="header">
<h1 id="title" class="title">Survey Form</h1>
<p id="description" class="description">This form collects information.</p>
</header>
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name
</label>
<input type="text" id="name" name="name" class="form-control" placeholder="Enter your name" required />
</div>
<div class="form-group">
<label id="email-label">Enter email</label>
<input type="email" id="email" name="email" class="form-control" placeholder="Enter your email" required />
</div>
<div class="form-group">
<label id="number-label">
Age
<span class="clue">(optional)
</span>
</label>
<input type="number" id="number" name="number" min="18" max="120" class="form-control" placeholder="Age" required />
</div>
<div class="form-group">
<p>Why are you filling in this form?
<select id="dropdown" name="reason" class="form-control" required>
<option disabled selected value>Choose one
</option>
<option value="filling">I like filling things</option>
<option value="lessEmpty">It makes me feel less empty</option>
</select>
</div>
<div class="form-group">
<p>How likely are you to fill in this form?</p>
<label>
<input name="user-likeliness" value="very-likely" type="radio" class="input-radio" />
Very Likely
</label>
<label>
<input name="user-likeliness" value="likely" type="radio" class="input-radio" />
Likely
</label>
<label>
<input name="user-likeliness" value="unlikely" type="radio" class="input-radio" />
Unlikely
</label>
<label>
<input name="user-likeliness" value="very-unlikley" type="radio" class="input-radio" />
Very Unlikely
</label>
</div>
<div class="form-group">
<p>What would you like to improve?
<span class="clue">(Check all that apply)
</p>
<label>
<input name="improve" value="myMind" type="checkbox" class="input-checkbox" />
My mind
</label>
<label>
<input name="improve" value="myBody" type="checkbox" class="input-checkbox" />
My body
</label>
<label>
<input name="improve" value="mySpirit" type="checkbox" class="input-checkbox" />
My spirit
</label>
</div>
<div class="form-group">
<p>Do you have any comments?</p>
<textarea id="comments" class="input-textarea " name="comment" placeholder="Keep your comments to yourself!"></textarea>
</div>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">Submit</button>
</div>
</form>
</div>
</body>
</html>
/* file: styles.css */
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge: