Survey Form - Build a Survey Form

i have a problem with my radio bottom, i did it exactly like how they teached it in the course before but for some reason the buttom is placed on the right side of the text. How can i put it on the left side of the text.

thank you

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css">
    <h1 id="title">Your favourite home scent </h1>
    <p id="description">a survey by Its Magaki</p>
    <form id="survey-form">
        <label id="name-label">Name <input id="name" type="text" name="name" placeholder="Maria Hofer" required/></label>
        <label id="number-label">Age <input id="number" type="number" name="age" pattern="[0-9]" min="13" max="100" alt="HTML5 validation error" placeholder="21" required/></label>
        <label id="email-label">E-mail <input id="email" type="email" name="email" alt="HTML5 validation error" placeholder="" required/></label>
        <label for="dropdown">Favourite way to scent your home
          <select id="dropdown">
            <option value="">select one</option>
            <option value="1">none</option>
            <option value="2">Scented Candles</option>
            <option value="3">Reed Diffusers</option>
            <option value="4">Electric Diffusers</option>
            <option value="5">Room Sprays</option>
        <label>Which scent suites your home the most</label>
        <label for="floral-notes">Floral Notes<input id="floral-notes" type="radio" name="scent-notes" class="inline" value="Folral Notes"></label>
        <label for="oriental-notes">Oriental Notes<input id="oriental-notes" type="radio" name="scent-notes" class="inline" value="Oriental Notes"></label>
        <label for="woody-notes">Woody Notes<input id="woody-notes" type="radio" name="scent-notes" class="inline" value="Woody Notes"></label>
        <label for="fresh-notes">Fresh Notes<input id="fresh-notes" type="radio" name="scent-notes" class="inline" value="Fresh Notes"></label>
        <label for="news"><input id="news" type="checkbox" required name="news" class="inline" value="newsletter">I want to be informed of the latest news and candles</label>
        <label for="terms-and-conditions"><input id="terms-and-conditions" type="checkbox" name="terms-and-conditions" class="inline" value="terms-and-conditions" required>I accept the terms and conditions</label>
        <label for="favourite-scent">What is your favourite scent?:
          <textarea id="favourite-scent" name="favourite-scent" rows="3" cols="30"></textarea>
      <input type="submit" value="Submit" id="submit"/>
/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #e8d9cc;
  font-size: 18px;
h1, p {
  text-align: center;
  margin: 1em auto;
form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
label {
  display: block;
  margin: 1rem 0;
input, select {
  width: 100%;
  margin: 10px 0 0 0;
  min-height: 2em;
  .inline {
    width: unset;
    margin: 0 0.5em 0 0;
    vertical-align: middle;

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:

Just write the text on the right of the input if you want the radio button to be on the left.

1 Like

omg thank you !!! i never thought it would be soo easy,

1 Like

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