Survey Form - Build a Survey Form

why my radio button not nest in same line with label element?

i just set width to 100% to render maximum length on first input field but while i am choosing radio input it aslo occupying maximum width despite label styled into block display

anyone can help me

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<link rel="stylesheet" href="styles.css"
  <div class="container">
   <!-- Heading section  -->
     <h1 id="title">freeCodeCamp Survey Form</h1>
     <p id="description">Thank you for taking the time to help us improve the platform</p>
   <!-- form section -->
<form id="survey-form" action="">
<!-- section 1 -->
  <label id="name-label">Name</label>
  <input id="name" type="text" Value="name" placeholder="Enter your name"place required>
  <label id="email-label">Email</label>
      <input id="email"type="Email" Value="email" placeholder="Enter your Eamil" required >
      <label id="number-label">Age(optional)</label>
      <input id="number"type="number" Value="password" placeholder="Age" required min="10" max="99">
<!-- Section-2 -->
<label>Which option best describes your current role?</label>
<select id="dropdown">
  <option value="role">Select current role</option>
        <option value="Student">Student</option>
        <option value="job">full time job</option>
        <option value="learner">full time learner</option>
        <option value="preferred">preferred not to say</option>
        <option value="other">other</option>
<!-- section 3 -->
<label>Would you recommend freeCodeCamp to a friend? </label>
<label><input type="radio" name="wish" value="Definitely" > Definitely</label>
<label><input type="radio" name="wish" value="Maybe"> Maybe</label>
<label><input type="radio" name="wish" value="Not sure"> Not sure</label>
<!-- section 4 -->
<label>What would you like to see improved? (Check all that apply)</label>
<label><input type="checkbox" value="Front-end Projects"> Front-end Projects</label>
      <label><input type="checkbox" value="Back-end Projects" > Back-end Projects</label>
      <label><input type="checkbox" value="Data Visualization" > Data Visualization</label>
<label><input type="checkbox" value="Challenges" > Challenges</label>
<label><input type="checkbox" value="Open Source Community"> Open Source Community</label>
<label><input type="checkbox" value="Gitter help rooms"> Gitter help rooms</label>
<label><input type="checkbox" value="Videos"> Videos</label>
<label><input type="checkbox" value="City Meetups"> City Meetups</label>
<label><input type="checkbox" value="Wiki"> Wiki</label>
<label><input type="checkbox" value="Forum"> Forum</label>
<label><input type="checkbox" value="Additional Courses"> Additional Courses</label>
<!-- section 5 -->
<label>Any comments or suggestions?</label>
<input type="textarea"  placeholder="Enter your comments here" >
<!-- section 6-->
<input id="submit" type="submit">

/* file: styles.css */
 width: 100%;
margin: 0;
background-repeat: no-repeat;
background-size: cover;
margin:5% 13% 0;

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:


Iā€™d check this part of your code, you are missing a closing brace on the link element here. This will prevent your css from applying to your html.

<link rel="stylesheet" href="styles.css"

thank you for noticing me. its been corrected

1 Like