How do I reduce the field size of input forms?

Question

The forms are currently oversized. I want to make them reasonably smaller, what do I have to change?
Code->
Html:
<div>
<section id="buy">
<form class="form-section">
<label for="Adults">Adults:</label>
<input type="number" id="Adults">
<label for="Children">Children:</label>
<input type="number" id="Children">
<input type ="button" value="Buy">
</form>
</section>
</div>
CSS:
#buy{
background-color: #687373;
margin: 10px;
color: #fcfcfc;
input[type="button"]{
background-color: #2493df;
color: white;
font-weight: bold;
font-size: 16px;
border:none;
height: 40px;
width: 100%;
}
form{
display: flex;
}
.form-section{
flex: 1;
}

Answer 1

To make the form smaller, you can adjust the width and height properties in the CSS for the form and its input fields.
https://code.sololearn.com/Wvw53JyMkwEN/?ref=app

Answer 2

Please *link* your code instead of pasting it into the description section.

You can link your code like this:
– Go to Code section, click +, select "Web", insert your code, save.
– Come back to the thread, click +, Insert Code, sort for My Code Bits, select your code.

This way, others can easily test and modify your code and it is much kore readable.

Answer 3

You need to set width of #buy(your container with forms)
For example set it to 300px or play with values until you find one what is good(if you also make responsive, maybe using percentage except pixels)

Also you didn't closed #buy style you miss }
So other styles does not apply.

You also have 2 different selector what select same element:
form and .form-section select same element
it work now but it may be bug in future, also it is not good practice to do this

Answer 4

Thank you everyone!