How do I center the label and input of this form?

Question

I'm new to HTML/CSS and had some questions about my CodeCamp project

1. How do I move the label and input to the center of the form? I've tried using text-align: center on my row class but it only separates the label and input.

2. Why are the checkboxes not grouped together? I've tried expanding the bottom margin but it brings the checkboxes on the left column where the labels are supposed to be.

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Nunito', sans-serif;
  background-color: #ea8a8a;
}

#title {
  color: #685454;
  text-align: center;
  padding: 10px;
}

#description {
  color: #685454;
  text-align: center;
  padding: 10px;
}

#outer-form {
  border-radius: 10px;
  background-color: #ebd5d5;
  padding-bottom: 10px;
}

.row {}

.label {
  color: #685454;
  display: inline-block;
  text-align: right;
  float: left;
  padding-top: 5px;
  width: 190px;
  margin-right: 20px;
}

#name {
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  width: 110px;
}

#email {
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  width: 110px
}

#number {
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  width: 110px
}

#dropdown {
  height: 30px;
  margin-top: 5px;
  margin-bottom: 14px;
  display: inline-block;
  vertical-align: middle;
  horizontal-align: bottom;
  margin-left: 20px;
  width: 120px
}

input[type=radio] {
  margin-left: 20px;
  margin-bottom: 30px;
  vertical-align: baseline;
  margin-top: 20px;
}

input[type=checkbox] {
  margin-left: 20px;
  vertical-align: baseline;
}

#comments {
  margin-top: 10px;
  margin-bottom: 5px;
  vertical-align: middle;
  margin-left: 20px;
  width: 150px;
  height: 50px;
}

#submit {
  background-color: #ea8a8a;
  color: white;
  border-radius: 5px;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 160px;
  width: 100px;
  height: 40px;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700">

<h1 id="title">Doge Adoption Form</h1>

<div id="outer-form">

  <p id="description">Please fill out the questionare below</p>

  <form id="survey-form">

    <div class="row">
      <label class="label" id="name-label" for="name">Name: </label>
      <input id="name" placeholder="Enter your name" required> </input>
    </div>

    <div class="row">
      <label class="label" id="email-label" for="email">Email: </label>
      <input id="email" type="email" placeholder="Enter your email" required> </input>
    </div>

    <div class="row">
      <label class="label" id="number-label" for="age">Age: </label>
      <input id="number" min="18" max="99" type="number" placeholder="Age:" required> </input>
    </div>

    <div class="row">
      <text class="label">What is your favorite dog: </text>
      <select id="dropdown">
        <option value="Pomeranian"> Pomeranian</option>
        <option value="Beagle"> Beagle</option>
        <option value="German Shepard"> German Shepard</option>
      </select>
    </div>

    <div class="row">
      <label class="label">How likely are you to pick up doge poop:</label>
      <input type="radio" name="odds" value="very likely"> Very Likely
      <input type="radio" name="odds" value="not likely"> Not Likely
    </div>

    <div class="row">
      <label class="label"> What tricks will you teach (select all that apply)</label>
      <input type="checkbox" name="trick" value="Sit">Sit<br>
      <input type="checkbox" name="trick" value="Army crawl">Army crawl<br>
      <input type="checkbox" name="trick" value="Roll over">Roll over<br>
      <input type="checkbox" name="trick" value="Speak">Speak<br>
    </div>



    <div class="row">
      <label class="label">Any additional information?</label>
      <textarea id="comments" placeholder="Enter your comment here..."></textarea>
    </div>

    <div class="row">
      <input id="submit" type="submit" value="Submit">
    </div>

  </form>

</div>

Answer 1

Look at this answer, I have added two styles in your page:

#survey-form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.div50 {
  float: left;
  width: 50%;
}

#survey-form for make the form alignment into center.

.div50 is to divide div as 50% of the parent div.

{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Nunito', sans-serif;
  background-color: #ea8a8a;
}

#title {
  color: #685454;
  text-align: center;
  padding: 10px;
}

#description {
  color: #685454;
  text-align: center;
  padding: 10px;
}

#outer-form {
  border-radius: 10px;
  background-color: #ebd5d5;
  padding-bottom: 10px;
}

.row {}

.label {
  color: #685454;
  display: inline-block;
  text-align: right;
  float: left;
  padding-top: 5px;
  width: 190px;
  margin-right: 20px;
}

#name {
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  width: 110px;
}

#email {
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  width: 110px
}

#number {
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  width: 110px
}

#dropdown {
  height: 30px;
  margin-top: 5px;
  margin-bottom: 14px;
  display: inline-block;
  vertical-align: middle;
  horizontal-align: bottom;
  margin-left: 20px;
  width: 120px
}

input[type=radio] {
  margin-left: 30px;
  margin-bottom: 15px;
  vertical-align: baseline;
  margin-top: 10px;
}

input[type=checkbox] {
  margin-left: 30px;
  vertical-align: baseline;
}

#comments {
  margin-top: 10px;
  margin-bottom: 5px;
  vertical-align: middle;
  margin-left: 20px;
  width: 150px;
  height: 50px;
}

#submit {
  background-color: #ea8a8a;
  color: white;
  border-radius: 5px;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 160px;
  width: 100px;
  height: 40px;
}

#survey-form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.div50 {
  float: left;
  width: 50%;
}

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700">

<h1 id="title">Doge Adoption Form</h1>

<div id="outer-form">

  <p id="description">Please fill out the questionare below</p>

  <form id="survey-form">

    <div class="row">
      <label class="label" id="name-label" for="name">Name: </label>
      <input id="name" placeholder="Enter your name" required>
    </div>

    <div class="row">
      <label class="label" id="email-label" for="email">Email: </label>
      <input id="email" type="email" placeholder="Enter your email" required>
    </div>

    <div class="row">
      <label class="label" id="number-label" for="age">Age: </label>
      <input id="number" min="18" max="99" type="number" placeholder="Age:" required>
    </div>

    <div class="row">
      <text class="label">What is your favorite dog: </text>
      <select id="dropdown">
        <option value="Pomeranian"> Pomeranian</option>
        <option value="Beagle"> Beagle</option>
        <option value="German Shepard"> German Shepard</option>
      </select>
    </div>

    <div class="row">
      <div class="div50"><label class="label">How likely are you to pick up doge poop:</label></div>
      <div class="div50">
        <input type="radio" name="odds" value="very likely"> <label>Very Likely</label><br>
        <input type="radio" name="odds" value="not likely"> <label>Not Likely</label>
      </div>
    </div>

    <div class="row">
      <div class="div50">
        <label class="label"> What tricks will you teach (select all that apply)</label>
      </div>
      <div class="div50">
        <input type="checkbox" name="trick" value="Sit">Sit<br>
        <input type="checkbox" name="trick" value="Army crawl">Army crawl<br>
        <input type="checkbox" name="trick" value="Roll over">Roll over<br>
        <input type="checkbox" name="trick" value="Speak">Speak<br>
      </div>
    </div>



    <div class="row">
      <label class="label">Any additional information?</label>
      <textarea id="comments" placeholder="Enter your comment here..."></textarea>
    </div>

    <div class="row">
      <input id="submit" type="submit" value="Submit">
    </div>

  </form>

</div>