Need help with alining checkboxes and labels

Hi! I am currently doing Web Design Survey form Certification test and I need help with alining checkboxes, readio buttons and their labels. I was referring to lessons 43-47 from Learn HTML Forms by Building a Registration Form course but it didn’t work. I also tried adding display:inline to the css but that didn’t help. Please see my code below:


<!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" />

    <! -- HEADER -->
  <h1 id="title">Exhibition designers'</h1>
  <h1 id="title">Survey Form</h1>
<p id="description"><em>Thank you for taking your time to answer our questions</em><p>

  <! -- INFO -->
<label> Name <input id="name" type="text" required></label>
<label> Email <input id="email" type="email" required></label>
<label> Age <input id="number" type="number" min="13" max="120" required></label>

 <! -- PROF -->
<label>Where did you get your knowledge from?
 <select id="dropdown"> 
<option value="">Select one</option>
<option value="1">One or more short courses</option>
<option value="2">Bachelor's degree</option>
<option value="3">Master's degree</option>
<option value="4">Working for professionals</option>
<option value="5"> Other</option>

<label> How often do you upgrade your skills?
  <label><input type="radio" name="skills" calss="inline"> Every month</label>
  <label><input type="radio" name="skills" calss="inline"> Every half a year</label>
  <label><input type="radio" name="skills" calss="inline"> Every year</label>
  <label><input type="radio" name="skills" calss="inline"> As often as possible</label>

<label>How do you develop your design concept?
<input type="checkbox" id="sketches" name="concept" value="sketches" calss="inline"> Sketches
<input type="checkbox" id="collages" name="concept" value="collages" calss="inline"> Collages
<input type="checkbox" id="mapping" name="concept" value="mapping" calss="inline"> Mapping
<input type="checkbox" id="infographics" name="concept" value="infographics" calss="inline"> Infographics
<input type="checkbox" id="modelmaking" name="concept" value="modelmaking" calss="inline"> Modelmaking
<label> What do you like about being an exhibition designer?  
<textarea name="reason" rows="5" cols="40" placeholder="Write your reasons here"></textarea>

<input type="submit" value="Submit">


body {
  width: 100%;
  height: 100vh;
  background-color: #F5EDDC;
    font-family: "montserrat";
    font-size: 14px

  h1, p {
  margin: 1em auto;
  text-align: center;

header {
    margin-top: 20px

h1 {
  margin-bottom: 0;
  margin-top: 0;
  font-family: 'Courier New', monospace;
  color: #A2B5BB

  font-weight: bold;
  font-size: 14px;
  color: #EB1D36;
  font-family: "montserrat";
  margin-bottom: 10px;

form {
  width: 50vw;
	max-width: 600px;
	min-width: 400px;
	margin: 0 auto;
    padding-bottom: 2em;

fieldset {
  border: none;
    padding: 2rem 0;

label {
  display: block;
	margin-bottom: 20px;      


     display: block;
    background-color: #F5EDDC;
        border: 0;  

input[type="number"] {
   margin-left: 12px

div {
    background-color: #CFD2CF;
    padding: 48px;
    border-radius: 25px;

select {
    background-color: #F5EDDC;
    border: none;

input[type="checkbox"] {
    display: block;
    align-items: center

textarea {
    border: none;
    background-color: #F5EDDC;

input[type="submit"] {
  display: block;
  width: 40%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #e6495c;
  color: white;
  min-width: 200px;
    box-shadow: 2px 3px 5px #a63846;
    border-radius: 10px;
    cursor: pointer;

input[type="submit"]:hover {
  background-color: #f07382;  

.inline {
    display: inline-block
  margin: 10px 0 0 0;
	width: 100%;
  min-height: 1em;

The first thing you want to get rid of is the width of 100% on the radio button and check box inputs. You probably don’t want display set to block on them either.

Also, you have labels nested within labels which is not valid HTML. You want to use a fieldset to group the radio buttons and check boxes and a legend for the question for those groupings.

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