How to make form smaller and put the form in the middle

Question

I have tryied everything to make my contact form in the centre and tidy it up a bit, because I was Name, Email Address and Age on the same line. I want Subject and drop down select on the second line and lastly i have tried to get the text area on the last line. I got the contact for of w3schools. I have tried searching the web and youtube for the answer, but nothing has worked.

* {
  box-sizing: border-box;
}

input[type=text],
select,
textarea,
input[type=email],
input[type=number] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

<div class="container">
  <form action="/action_page.php">
    <input type="text" id="name" name="name" placeholder="Name">
    <input type="email" id="email" name="email" placeholder="Email Address">
    <input type="number" id="age" name="age" placeholder="Age">
    <input type="text" id="subject" name="subject" placeholder="Subject">
    <select type="dropdown" name="contact" placeholder="Age">
      <option placeholder="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
    <textarea id="message" name="message" placeholder="Talk To Us" style="height:200px"></textarea>
    <input type="submit" value="Submit">
  </form>
</div>

My form

This is the way i am trying to get my form

Answer 1

* {
  box-sizing: border-box;
}

input[type=text],
select,
textarea,
input[type=email],
input[type=number] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  
  width:80%;
  max-width:800px;
  margin:0 auto;
}
.flex-row{
  display:flex;
  justify-content:space-between;
  align-content:center;
  align-items:strech;
  line-height:45px;
}
.flex-row input,
.flex-row textarea,
.flex-row select{
  margin:5px;
}
input[type=submit]{
margin:5px auto;
display:block;
}
.flex-row input:nth-child(3){
  flex-basis:150px;
}

<div class="container">
  <form action="/action_page.php">
    <div class="flex-row">
      <input type="text" id="name" name="name" placeholder="Name">
      <input type="email" id="email" name="email" placeholder="Email Address">
      <input type="number" id="age" name="age" placeholder="Age">
    </div>
    <div class="flex-row">
      <input type="text" id="subject" name="subject" placeholder="Subject">
      <select type="dropdown" name="contact" placeholder="Age">
        <option placeholder="australia">Australia</option>
        <option value="canada">Canada</option>
        <option value="usa">USA</option>
      </select>
    </div>
    <div class="flex-row">
     <textarea id="message" name="message" placeholder="Talk To Us" style="height:200px"></textarea>
    </div>
    <input type="submit" value="Submit">
  </form>
</div>

Give with to your container and center it with margin: auto See my code.

Ho sorry, here you can find what you need..