Hello,
I need your help in CSS to put the same width for all the components of my survey form.
I tried to put a width of 80% to .champs, but the last two (country and jobs) are smaller than the rest (name, email and age). I don’t understand why.
My code below.
HTML:
<form id="survey-form" method="post" action="#">
<div class="survey-form__1">
<div class="border-box">
<p>
<label for="name" id="name-label">Name</label><br />
<input class="champs" type="text" name="name" id="name" placeholder="Enter your beautiful name" maxlength="20" required />
</p>
<p>
<label for="email" id="email-label">Email</label><br />
<input class="champs" type="email" name="email" id="email" placeholder="Enter your funny email" required />
</p>
<p>
<label for="number" id="number-label">Age</label><br />
<input class="champs" type="number" name="number" id="number" placeholder="Select your age" min="10" max="90" required />
</p>
<p>
<label for="country" id="country-label">Country</label><br />
<select class="champs" name="country" id="country" required>
<option value="" selected>--- Select your country</option>
<option value="canada">Canada</option>
<option value="china">China</option>
<option value="england">England</option>
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="italy">Italy</option>
<option value="japan">Japan</option>
<option value="spain">Spain</option>
<option value="russia">Russia</option>
<option value="switzerland">Switzerland</option>
<option value="united-states">United-States</option>
<option value="other">Other</option>
</select>
</p>
<p>
<label for="job" id="job-label">Job</label><br />
<select class="champs" name="job" id="job" required>
<option value="" selected>--- Select your job</option>
<option value="craftsmen">Craftsmen, shopkeepers, business leaders</option>
<option value="employees">Employees</option>
<option value="executives-professions">Executives and higher intellectual professions</option>
<option value="farmer">Farmer</option>
<option value="intermediary-professions">Intermediary professions</option>
<option value="not-determined">Not determined</option>
<option value="retired">Retired</option>
<option value="student">Student</option>
<option value="workers">Workers</option>
</select>
</p>
</div>
CSS:
#survey-form{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.survey-form__1{
max-width: 40%;
text-align: center;
}
.survey-form__1 input{
margin-top: 5px;
font-family: "Courier New", Verdana, sans-serif;
}
.survey-form__1 select{
margin-top: 5px;
font-family: "Courier New", Verdana, sans-serif;
color: #9c9c9c;
}
.champs{
width: 80%;
}
.survey-form__1 #job{
margin-bottom: 20px;
}
.survey-form__1 label{
font-family: 'Secular One', Verdana, sans-serif;
margin-bottom: 10px;
}
.border-box{
border: 0.2em solid #f4d62f;
background-color: #f4d62f;
box-shadow: 3px 3px 10px grey;
width: 100%;
}
Thanks in advance,
Manon