Survey form- checkbox and radio


Im almost done, but I have a question, everything looks good, but my radio and checkboxs are aligned in the middle, I believe because they are styled at the css with “input”…

Eitherway, how can I set them so they can be on the left of their own option?, what step did I make them go in the middle?

<!Doctype html>

<html lang="en">
    <meta charset"utf-8">
    <link rel="stylesheet"  href="styles.css">
    <title>Survey Form</title>
<h1 id="title">Rodolfo´s Survey form</h1>
<p id="description">Thank you for your time to help us improve.</p>

<form id="survey-form">
  <label class="margenes" id="name-label">Name<input id="name" type="text" placeholder="Enter your name" required></input>
  <label id="email-label">Email<input id="email" type="email" placeholder="Enter your email" required></input>
  <label id="number-label">Age
  <input id="number" type="number" min="1" max="99" placeholder="Enter your age"></input> 
 <label>Which option best describes your current role</label>
  <select id="dropdown">
    <option>Full time job</option>
<option>Full time learner</option>

 <label>Whould you recommend freecodecamp to a friend?</label>
<label class="checks">Definitely<input type="radio" value="value" name="value"></input></label>
   <label class="checks">Maybe<input type="radio" value="value" name="value"></input></label>
   <label class="checks">Not sure<input type="radio" value="value" name="value"></input></label>
<label>What would you like to see improved? (Check all that apply)</label><br><br>
  <label class="checks">Front-end projects<input type="checkbox" name="value" value="value"></input></label>
<label class="checks">Back-end projects<input type="checkbox" name="value" value="value"></input></label>
<label class="checks">Data Visualization<input type="checkbox" name="value" value="value"></input></label>
<label class="checks">Challenges<input type="checkbox" name="value" value="value"></input></label>
<label class="checks">Open Source Community<input type="checkbox" name="value" value="value"></input></label> <br>
<label class="checks">Videos<input type="checkbox" name="value" value="value"></input></label>
<label>Any comments or suggestions?</label><br><br>
   <textarea>Enter your comment here...</textarea><br>
<br><button id="submit" type="submit">Submit</button>
body {
  background-image: url(*SEJQh2lJJP3SJdApxlF95A.png);
  color: white;
  font-family: sans-serif;
  display: block;
  margin: 20;
h1 {
  color: white;
    text-align: center;
  margin-top: 30;
  margin-bottom: 10;
p {
  text-align: center;

label {
  font-size: 15;
    margin-left: 10;
form {
  margin-left: 100;
margin-right: 100;
  background-color:  rgba(0,0,80,0.5);
button {
  text-align: center;
  width: 95%;
  margin-left: 12;
  margin-right: 12;
  margin-bottom: 20;
background-color: rgba(100,155,100);
height: 35;
color: white;
border: white;

input {
  margin-left: 10;
  margin-bottom: 5;
  margin-top: 5;
  width: 95%;
  padding: 4;
select {
  margin-left: 10;
  margin-top: 1;
  width: 95%
textarea {
  margin-left: 10;
  width: 95%;
  height: 80;
.checks {
  font-size: 13;
  margin-left: 40;


I already fixed it, how can I erase this post?

You should provide the solution you came up with so others can learn from it should they happen to find this thread.

Deleting the thread is not going to help anyone.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.