I have 4 fieldsets, with the 3rd one showing (partially only) within the 2nd one.
I can’t put my finger on why it does that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Survey Form</title>
</head>
<body>
<header>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
</header>
<main>
<form id="survey-form" method="post">
<fieldset>
<legend>Personal information</legend>
<label for="name" id="name-label">Name</label>
<input type="text" id="name" placeholder="John Smith" required>
<label for="email" id="email-label">Email</label>
<input type="email" id="email" placeholder="john@domain.com" required>
<label for="age" id="number-label">Age</label>
<input type="number" id="number" placeholder="45" min="3" max="100">
</fieldset>
<fieldset>
<legend>A bit more about you</legend>
<label for="identity">Identity</label>
<select id="dropdown" >
<option value="alien">Alien</option>
<option value="human">Human</option>
</fieldset>
<fieldset>
<legend>Where are you from?</legend>
<label for="origin">Oh, I'm from around here</label>
<input type="radio" id="local" name="origin" value="local">
<label for="origin">I'm an outsider</label>
<input type="radio" id="foreigner" name="origin" value="foreigner">
</fieldset>
<fieldset>
<legend>And you're here because..?</legend>
<label for="business-option">Business</label>
<input type="checkbox" name="reason1" value="business" />
<label for="leisure-option">Leisure</label>
<input type="checkbox" name="reason2" value="leisure" />
</fieldset>
<label for="comments">Any words you say, bla bla bla...</label>
<textarea cols="30" rows="10"
name="comments"
id="comments">
</textarea>
<input type="submit" id="submit" value="Submit">
</form>
</main>
</body>
</html>
