HTML: How can I align this form?

Question

I have a form in my code, but it's off to the left side of the page. I don't know how to align it.

 <form method="post" action="#">
  <div class="5grid">
    <div class="row">
      <div class="6u">
        <input type="text" name="name" id="name" placeholder="Name">
      </div>
      <div class="6u">
        <input type="text" name="email" id="email" placeholder="Email">
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <input type="text" name="subject" id="subject" placeholder="Subject">
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <textarea name="message" id="message" placeholder="Message"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <input type="submit" class="button" value="Send Message">
        <input type="reset" class="button button-alt" value="Clear Form">
      </div>
    </div>
  </div>
</form>

And it looks like this :

Any help appreciated.

Answer 1

<style media="screen" type="text/css">

form {
width: 400px; 
margin: 0 auto; 
} 

</style>
 <form method="post" action="#">
  <div class="5grid">
    <div class="row">
      <div class="6u">
        <input type="text" name="name" id="name" placeholder="Name">
      </div>
      <div class="6u">
        <input type="text" name="email" id="email" placeholder="Email">
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <input type="text" name="subject" id="subject" placeholder="Subject">
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <textarea name="message" id="message" placeholder="Message"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <input type="submit" class="button" value="Send Message">
        <input type="reset" class="button button-alt" value="Clear Form">
      </div>
    </div>
  </div>
</form>

This should work

Answer 2

If you just want it horizontally centered, put your form inside a width-limited div parent, and a doc-wide div grandparent with centered content:

<div style="text-align: center">
 <div style="width: 400px; text-align: left;">
  <form ...
  ...
  </form>
 </div>
</div>