Hi!
I am very new to freecodecamp - I have built a Survey with screenshots below. I am struggling to center/align the checkbox buttons to the text under “What is your industry?”
Index.html code:
<body>
<h1 id="title">Survey Form</h1>
<p id="description">Please fill in the survey below.</p>
<form id="survey-form">
<fieldset>
<label id="name-label">Enter your name: <input id="name" name="name" type="text" required placeholder="name"/></label>
<label id="email-label">Enter your Email: <input id="email" name="email" type="email" min="13" max="20" required placeholder="email"/></label>
<label id="number-label">Number: <input id="number" type="number" min="13" max="20" placeholder="number"/>
</fieldset>
<fieldset>
<label id="personal-account"><input id="personal-account" type="radio" name="account" class="inline" value="1">Personal Account</label>
<label id="business-account"><input id="business-account" type="radio" name="account" class="inline" value="2">Business Account</label>
</fieldset>
<fieldset>
<legend>What is your industry?</legend>
<input id="retail" type="checkbox" name="industry" value="retail" class="inline" value="1"><label id="Retail">Retail</label>
<input id="software" type="checkbox" name="industry" value="software" class="inline" value="2"><label id="software">Software</label>
</fieldset>
<fieldset>
<label for="dropdown">How did you hear about us?</label>
<select id="dropdown" name="dropdown">
<option value="">Select One</option>
<option value="1">Google</option>
<option value="2">Facebook</option>
<option value="3">Linkedin</option>
</select>
</label>
</fieldset>
<fieldset>
<label id="comments">Additional Comments
<textarea id="comments" name="comments" rows="3" cols="30" placeholder="Additional Comments"></textarea>
</label>
</fieldset>
<input id="submit" type="submit" value="Submit"/>
</form>
</body>
</html>
styles.css code:
body{
width: 100%;
height: 100vh;
background-color: black;
color: white;
font-family: arial;
font-size: 15px;
}
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;
border-bottom: 3px solid white;
}
fieldset: last-of-type{
border-bottom: none;
}
label{
display: block;
margin: 0.5rem ;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
input,textarea,select{
margin: 10px 0 0 0;
width: 100%;
min-height: 1em;
}
input,textarea{
border: 1px solid black;
}
input[type="submit"]{
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: yellow;
min-width: 300px;
}