Hello Jordan,
Welcome to the forum 
I checked your pen, and before anything else, I ran the HTML validator of CodePen. I found errors and one of them is that there’s only a label end tag at line 82. I observed that your code is hard to read as labels are disorganized and kind of messed up. I tried to arrange them for you so your code would be better off this way:
<label for="parents">
<input id="parents" type="radio" name="learning-pants" value="parents">from parents
</label>
<label for="school">
<input id="school" type="radio" name="learning-pants" value="school">at school
</label>
<label for="who">
<input id="who" type="radio" name="learning-pants" value="who">what are pants
</label>
Another part of your code that could be structured better is at lines 38-51. I modified them for you so can better understand what I’m trying to point out here.
<label id="name-label">NAME
<input type="text" required id="name" placeholder="name">
</label>
<label id="email-label">EMAIL
<input type="email" required id="email" placeholder="email">
</label>
<label id="number-label">PANTS
<input type="number" required id="number" placeholder="number of pants owned" min="35" max="200">
</label>
I hope you would rightly use indentation next time so readers (including yourself) can read your code easier. For the other error, you can remove !doctype at the top of HTML.
I observed that you’re using a lot of divs as containers for sections of content. It is not a good practice because divs are mainly used for styling purposes. Please try to use the element tags as much as possible to contain blocks of content.
For instance, you’re containing the form inside a div that has an id of “form”. Then you styled both the form tag and the div in your CSS. Div is not necessary here because the form tag itself is the container for the form’s content. You can target the whole form in your CSS by just using the form as your selector.
The same thing applies to your code about labels that I’ve mentioned earlier. Instead of div, you can contain them in fieldset tags. For instance, the div at HTML line 37, <div class=info> you can change it to <fieldset> so your code will be like this now:
<fieldset>
<label id="name-label">NAME
<input type="text" required id="name" placeholder="name">
</label>
<label id="email-label">EMAIL
<input type="email" required id="email" placeholder="email">
</label>
<label id="number-label">PANTS
<input type="number" required id="number" placeholder="number of pants owned" min="35" max="200">
</label>
</fieldset>
You can style this block of form content by using fieldset as your selector in CSS instead of the class info. You can also apply this lesson by removing the div containing the whole content of the page. Target the <body> as it is the tag that should contain the web page’s content like header, sections, paragraphs, and form.
So you should also put <h1>Welcome</h1> and the <p class = "description">...</p> inside the body, not in the head. You could create a header element, <header></header> and put the two tags inside to kind of separate it from the from (as you also want to style it differently like a white background).
Your HTML structure should look like this:
<html>
<head>This should only contain meta data (like title). This is not visible unlike the content inside the body</head>
<body>
<header>
<h1>Welcome</h1>
<p class="description">Intro text</p>
</header>
<form>
<fieldset>
<label>
<input>
</label>
</fieldset>
</form>
<footer></footer>
</body>
</html>
When styling the header to have a white bg; the form to have a light green bg, and the body to have a dark green bg, I advise you to create a div to contain the header and the form. This is the right time to use a div because what you’re trying to do is just style them.
You might have noticed that I removed the multiple line breaks or br. I believe a better, more efficient, and more effective way to add spacing is by adjusting the elements’ margin. Target the labels then add top and bottom margins. For example in CSS the code will be:
label {
margin: 0.5rem 0;
}
This way every label like the NAME, EMAIL, and PANTS will be separated by 0.5rem from each other. Or there’s a 0.5 rem spacing between them on their top and bottom sides.
If you’re going to follow the right structure I created earlier, the first fieldset that contains the question “Do you like pants” and the choices for it, will be separated from the second fieldset which is all about asking the user’s name, email, and pants 
ALso, you might run into another problem of the labels sitting next to each other. It is because they are inline elements. What kind of display property do you think will let the labels be separated from each other or will let each of them be in their own line?
