HTML Bootstrap form and well not aligning to the center - html

Question

I'm working on a simple landing page for a site and my form wont align to the center. If you take a look here you can see that it is slightly offset to the right. I've tried adding a container div around the form and well, setting it as a block with margin:0 auto as well, but nothing changes. I've also tried setting class="span6 offset 3" to align it in the center but that little offset still remains. I have a feeling that all the divs inside other divs are building up some sort of margin on, but I can't seem to figure out how to fix it.
Here's my HTML code:
<div class="row">
<div class="span3"></div><!--/.span3-->
<div class="span6">
<div class="well span6" align="center">
<form id="contact-form" name="contact-form" method="post" action="form-processing.php">
<input class="span6" name="Name" id="Fname" type="text" placeholder="Your name" required>
<input class="span6" name="Email" id="Email" type="email" placeholder="Your email" required>
<input class="span6" name="Message" id="Message" type="text" rows="3" placeholder="What's on your mind?" required><br>
<button type="submit" class="btn btn-primary" id="button">Submit</button>
<button type="reset" class="btn">Clear</button>
</form>
</div><!--/.well span6-->
</div><!--/.span6-->
<div class="span3"></div><!--/.span3-->
</div><!--/.row-->
And here's my non-Bootstrap CSS code:
h1 {font-family: marvel, serif; color:#060; font-size:90px; -webkit-text-stroke: 1px white;}
h2 {font-family: marvel, serif; color:#CCC; font-size:50px; -webkit-text-stroke: 1px black;}
p {color:white; font-size:20px;}
body{
padding: 40px;
margin:0 auto;
background-image: url(../img/background.jpg);
background-repeat: repeat;
background-position: center center;
}
.welcome {padding:30px 0 0 0;}
#Message {overflow:hidden;}
.well {margin:0 auto;}
.navbar-fixed-top,.navbar-fixed-bottom{position:fixed}
If you can figure out what the problem is I'll bake you a pie or something. Thanks.

Answer 1

Here is my new code that I typed out, which is almost identical to the previous, with the omission of a span6 class. Everything is lined up perfectly now.
<div class="row">
<div class="span3"></div><!--/.span3-->
<div class="well span6" align="center">
<form id="contact-form" name="contact-form" method="post" action="form-processing.php">
<input class="span6" name="Name" id="Fname" type="text" placeholder="Your name" required>
<input class="span6" name="Email" id="Email" type="email" placeholder="Your email" required>
<textarea class="span6" name="Message" id="Message" type="text" rows="3" placeholder="What's on your mind?" required></textarea><br>
<button type="submit" class="btn btn-primary" id="button">Submit</button>
<button type="reset" class="btn">Clear</button>
</form>
</div><!--/.well span6-->
<div class="span3"></div><!--/.span3-->
</div><!--/.row-->

Answer 2

I recommend not editing the bootstrap css but including your own css as you've done above. Create an id for the specific you want centered and then pad it until it works. Looks like the bootstrap css interfered with your own css causing the problems. It works now so if you think it's important remember to you only your own css when you want to make changes in the future. One final thing, have the bootstrap page open it gives you an idea of what the spans and rows look like before including them in your page.

Answer 3

It looks like the padding on your "well" class is adding width to bootstrap's span6 class.
You could take the box-sizing route by adding "box-sizing: border-box;" to your well class or by targeting that specific div and reducing the width from 570px (bootstrap's span6 width) to 532px (19px padding on left and right).
Hope that helps.

Answer 4

Remember that for bootstrap theres the '-offset-' class which is very helpful when it comes to aligning items. For example you could use "col-md-12 col-md-offset-2" or for a span6 "col-lg-6 col-lg-offset-3".