Why is my checkboxes centered and not to the left?
I don’t understand why my checkboxes are located in the center instead of the left side of the screen. I’ve given them the class “inline”, which is the same as my radio buttons. My radio buttons are though located where I want them. What am I doing wrong here?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<style>@import url('https://fonts.googleapis.com/css?family=Roboto');</style>
<head>
<meta charset="UTF-8">
<h1 id="title">Companion Survey Form</h1>
<link rel="stylesheet" href="styles.css">
<p id="description">Short servey for premium subscription</p>
<form id="survey-form">
<fieldset>
<label id="name-label">Your Name:
<input id="name" type="text" placeholder="name" required /></label>
<label id="email-label">Your Email:
<input id="email" type="email" placeholder="email" required /></label>
<label id="number-label">Your Age:
<input id="number" type="number" min="10" max="120" placeholder="number" /></label>
<p>what price do you think is fair?</p>
<select id="dropdown" class="dropdown">
<option value "1">$</option>
<option value "1">$5.00</option>
<option value "2">$10.00</option>
<option value "3">$20.00</option>
<option value "4">$50.00</option>
</select>
</fieldset>
<fieldset>
<p>Would you recomment our platform to others?</p>
<label for="yes-answer">
<input id="yes-answer" type="radio" name="answer" class="inline" value="answer" />yes</label>
<label for="no-answer">
<input id="no-answer" type="radio" name="answer" class="inline" value="answer" />no</label>
<label for="maybe-answer">
<input id="maybe-answer" type="radio" name="answer" class="inline" value="answer" />maybe</label>
</fieldset>
<fieldset>
<p>Which package would you consider, giving the best return on investment?
<label for="starterpack">
<input name="starter-pack" id="starterpack" value="starter" class="inline" type="checkbox" />starter-pack</label>
<label for="mediumpack">
<input name="medium-pack" id="mediumpack" value="medium" class="inline" type="checkbox" />medium-pack</label>
<label for="allpremium">
<input name="all-premium" id="allpremium" value="all" class="inline" type="checkbox" />all-premium</label>
</fieldset>
<fieldset>
<textarea placeholder="Additional comments..."></textarea>
</fieldset>
<input type="submit" value="Submit" id="submit"/>
</form>
</head>
</html>
/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: 0%;
background-image: url(https://www.teahub.io/photos/full/13-136885_sunset-mountain-wallpaper-4k.png);
color: rgb(255, 125, 0);
font-family: 'Roboto', sans serif;
font-size: 16px;
}
h1, p {
margin: 1em auto;
text-align: center;
}
form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid hsl(25, 100%, 60%);
}
fieldset:last-of-type {
border-bottom: none;
}
label{
display: block;
margin: 0.5rem 0;
}
input,
textarea,
select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
}
input, textarea {
background-color: #ffaf70;
border: 1px solid hsl(280, 80%, 20%);
color: hsl(280, 80%, 25%);
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: hsl(35, 100%, 45%);
border-color: hsl(280, 80%, 30%);
min-width: 300px;
}
.dropdown{
background-color: #ffaf70;
border: 1px solid hsl(280, 80%, 20%);
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge: