center form on the page

Question

I am trying to get my form to center on desktop. It's currently to the left side.

I tried doing display: block and margin-left: auto and margin-right: auto and it is still being fussy.

The picture below shows the issue and I'll add a snippet and a fiddle to help. Thanks in advance.

Jsfiddle: https://jsfiddle.net/r87h2L6n/

/*********FORMS CSS*************/

form {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
form.contact label {
  display: block;
}
span {
  display: block;
  border: none;
  color: white;
}
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}
fieldset {
  width: 45%;
  float: left;
  border: none;
}
input.checks {
  width: auto;
}
.left {
  width: 45%;
  float: left;
}
.right {
  width: 45%;
  float: right;
}
input {
  border: none;
  border-bottom: 2px solid #959595;
  width: 300px;
  margin: 3px;
  color: #6C6A6A;
  padding-top: 10px;
  padding-bottom: 10px;
}
.bottom {
  border: none;
  margin: 3px;
  color: #6C6A6A;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 300px;
}
.fa {
  margin-right: 10px;
}
legend {
  color: white;
}
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #595959;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  width: 150px;
}
.button:hover {
  background-color: #670809
}
.button:active {
  background-color: #670809;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

<section class="clearfix" id="fourthpara">
  <div class="imgbox5">
    <img id="pic5" class="adjustable float move" src="http://weknowyourdreams.com/images/kitten/kitten-08.jpg" alt="example web page">
  </div>
  <h2>Student Review 3</h2> 
  <p class="side">
    “This class is up to date on the latest techniques, the instructor is willing to go the extra mile, and the class is well structured” -Papa Smurf
  </p>
</section>
</div>
</section>
<div class="center clearfix">
  <h1 id="fourth">Contact</h1>

  <form action="FormToEmail.php" method="POST" enctype="multipart/form-data" autocomplete="on" class="contact clearfix ">
    <section class="clearfix">
      <fieldset>
        <legend>
          <i class="fa fa-user" aria-hidden="true"></i>Personal Information
          <hr class="style2">
        </legend>
        <label><span></span> 
          <input name="first_name" type="text" value="" placeholder="First Name" required/>
        </label>
        <label><span>
</span>
          <input name="last_name" type="text" value="" placeholder="Last Name" required/>
        </label>
        <label><span> </span>
          <input name="date_of_birth" type="date" value="" placeholder="Date of Birth" required/>
        </label>

        <label><span>
 </span>
          <input type="number" name="quantity" min="1" max="6" placeholder="number of years until next degree">
        </label>

        <label><span></span> 
          <input name="level_of_education" type="hidden" value="" placeholder="level of education" required/>
        </label>
        <select class="bottom" name="education_level">
          <option value="High School">High School</option>
          <option value="Undergraduate">Undergradute</option>
          <option value="Graduate">Graduate</option>
        </select>
      </fieldset>
      <fieldset>
        <legend><i class="fa fa-envelope-o" aria-hidden="true"></i>
          Contact Information
          <hr class="style2">
        </legend>

        <label><span>
</span>
          <input class="ghost-input" name="email" value="" type="email" placeholder="youremail@email.com" autocomplete="off" />
        </label>

        <label><span></span>
          <input name="phonenumber" value="" type="tel" placeholder="763-858-9564" />
        </label>

        <label><span></span>
          <input name="website" value="" type="url" placeholder="https://yourwebsite.com" />
        </label>
      </fieldset>
    </section>
    <section class="clearfix column">
      <fieldset>
        <legend><i class="fa fa-laptop" aria-hidden="true"></i>
          What are your Interests
          <hr class="style2">
        </legend>
        <section class="clearfix column left">
          <label class="bottom span"><span><input name="webdesign" value="web_design" type="checkbox" class="checks"/>Web Design</span>
          </label>
          <label class="bottom"><span><input name="webdevelopment" value="web_development" type="checkbox" class="checks" />Web Development</span>
          </label>
          <label class="bottom"><span><input name="computerscience" value="computer_science" type="checkbox"class="checks" />Computer Science</span>
          </label>
        </section>
        <section class="clearfix column left">
          <label class="bottom"><span><input name="graphicdesign" value="graphic_design" type="checkbox" class="checks"/>Graphic Design</span>
          </label>
          <label class="bottom"><span><input name="userexperience" value="user_experience" type="checkbox" class="checks" />User Experience</span>
          </label>
          <label class="bottom"><span><input  class="checks" name="appdevelopment" value="app_development" type="checkbox" />App Development</span>
          </label>
        </section>
      </fieldset>
      <fieldset>
        <legend><i class="fa fa-volume-control-phone" aria-hidden="true">

</i>
          Follow Up
          <hr class="style2 toosmall">
        </legend>

        <section class="clearfix column left">

          <legend class="smaller">You can contact me by:</legend>
          <br>

          <div class="squish">
            <label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="phone" checked/>Contact me by phone</span>
            </label>

            <label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="email" checked/>Contact me by email</span>
            </label>

            <label class="bottom"><span><input class="checks"  name="contact_me" type="radio" value="text"/>Contact me by text</span>
            </label>
            <br>
          </div>
        </section>
        <section class="clearfix column left">
          <legend class="smaller">I'm interested in:</legend>
          <br>

          <label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Undergraduate</span>
          </label>
          <label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Graduate</span>
          </label>
          <label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Online</span>
          </label>
        </section>
      </fieldset>
    </section>
    <input class="button" name="submit_to_programmer" type="submit" value="Submit" />
    <input type="hidden" value="Message from Car Website" name="subject">
    <input name="redirect" type="hidden" value="thanks.html">
  </form>

Answer 1

The reason it's not centering is that your form element is a block level container and, therefore, it's occupying 100% width of the page. As a result, there no space left for centering.

As you wrote:

I tried doing display: block and margin-left: auto and margin-right: auto and it is still being fussy.

Well, if you give an element display: block it consumes all available horizontal space. Hence, margin-left: auto and margin-right: auto have no effect.

Try defining a width for the form (e.g. width: 30em), removing float rules and/or giving the form text-align: center, which centers the child elements.

Answer 2

It's not your form that is the issue here, it is your fieldset...again. Give this a whirl.

fieldset {
  width: 45%;
  margin: 0 auto;
  /* float: left; -- DELETE float: left if you want this centered */
  border: none;
}

UPDATE:

If you also want that submit button to be centered, here is the css for that.

.button {
  margin: 0 auto; /* ADDED THIS */
  display: block; /* Took inline-block out, just use block */
  padding: 15px 25px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #595959;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  width: 150px;
}

LIVE DEMO

Answer 3

To add to Michael_B`s answer your form is set to take up the full width of the page as its a block element by default and you have set it as well. Margin auto only works for elements that are block or inline-block elements and they width of either must be set to a specified value for it to work.

To address your problem now, looking at your source code, you can get the result you expect by removing the float set on your fieldset element in your CSS and setting Margin to auto in that element. I am not sure what the purpose of the float in that CSS rule but you cannot center something that you have set to float. Hope this helps