Tell us what’s happening:
The instructions (CSS):
As label elements are inline by default, they are all displayed side by side on the same line, making their text hard to read. To make them appear on separate lines, add display: block to the label element, and add a margin of 0.5rem 0 , to separate them from each other.
I don’t know what I’m doing wrong here.
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Registration Form</h1>
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name:</label>
<label>Enter Your Last Name:</label>
<label>Enter Your Email:</label>
<label>Create a New Password:</label>
</fieldset>
<fieldset></fieldset>
<fieldset></fieldset>
</form>
</body>
</html>
/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
label {
display: block;
margin: 0.5rem 0;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 Safari/537.36 OPR/89.0.4447.83
Challenge: Learn HTML Forms by Building a Registration Form - Step 15
Link to the challenge: