Tell us what’s happening:
Unable to center my input type
Your code so far
<body>
<h1 id="title">
Survey Form
</h1>
<h3 id="discription">Let us know how we can serve you better</h3>
<form id="survey-form" class="col-25">
<div >
<label for="name" >Name</label> </div>
<div><input type="text" name="name" id="input" value="Enter your name"></input></div>
<br><br>
<label for="email">Email</label>
<input type="email" name="email" id="ff" value="Enter your valid email"></input>
<br><br>
<label for="age">Age</label>
<input type="number" name="age" id="ff" placeholder="age" min="0" max="100"></input><br><br>
</div>
<div>
<label for="cars">Kindly choose your best car</label>
<select name="cars" id="ff">
<option value="volvo">Volvo</option>
<option value="toyota">Toyoto</option>
<option value="kia">Kia</option>
</select>
</div>
<div>
How likely that you will<br>
recommend our products to your friend?
<label for="dicrcar">Definately</label>
<input type="radio" name="discrcar" id="disccar" value="Definately"</input><br>
<label for="maybe">May be</label>
<input type="radio" name="maybe" value="maybe"</input><br>
<label for="notsure"> Not sure</label>
<input type="radio" name="notsure" value="notsure"</input>
</div><br>
<div>
<label for="FCC">What do you like most in FCC:</label>
<select name="fcc" id="fcc">
<option value="select an option"> select an option</option>
<option value="challenges">Challenges</option>
<option value="project">Project</option>
<option value="community">Community</option>
<option value="open source">Open Source</option>
</select>
</div>
<div>
<label for="improve" id="improve">Thinks that should be improved in the future</label>
<input type="checkbox" name="improve" id="improve">Front-end Project</input><br>
<input type="checkbox" name="bk" id="improve">Back-end Project</input><br>
<input type="checkbox" name="da" id="improve">Data Visualization</input><br>
<input type="checkbox" name="cl" id="improve">Challenges</input><br>
<input type="checkbox" name="op" id="improve">Open Source Community</input><br>
<input type="checkbox" name="gt" id="improve">Gitter help rooms</input><br>
<input type="checkbox" name="vd" id="improve">Video</input><br>
<input type="checkbox" name="city" id="improve">City meetups</input><br>
<input type="checkbox" name="wk" id="improve">Wiki</input><br>
<input type="checkbox" name="ad" id="improve">Additional Courses</input>
</div>
<div>
<label for="moreinfo" id="moreinfo">Any comments or suggestions</label>
<input type="textarea" id="moreinfo" value="Enter comment here"></input>
</div>
<botton>Submit</botton>
</form>
</body>
CSS CODE
body{background-color: green;
}
#title{
text-align: center;
}
#discription{text-align: center;
}
#survey-form{
border-radius: 5px;
background-color: #f2f2f2;
padding: 50px;
}
/* Floating column for labels: 25% width */
.col-25 {
float: center;
width: 50%;
margin: auto;}
/* Floating column for inputs: 75% width */
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
input[type=text], input[type=radio]{
text-align:center;
display: block;
margin: 0 0 1em 0;
width: 90%;
border: 1px solid #818181;
padding: 5px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.
Link to the challenge:
