Contact Form won't center within parent div

Question

I can't get my form to align in the center of a div. Driving me nuts!

I simply need this contact form to be centered, no matter the viewport size. Right now it's off to left, but I can't figure it out. I've included a codePen here

And here's my demo site

The html for the form (and parent container) is below. Any feedback whatsoever is helpful! Thank you

<section id="contact" class="contact">
            <div class="container">
                <div class="row mb50">

                    <div class="sec-title text-center mb50 wow fadeInDown animated" data-wow-duration="500ms">
                        <h2>Get in touch</h2>
                        <div class="devider"><i class="fa fa-heart-o fa-lg"></i></div>
                    </div>

                    <div class="sec-sub-title text-center wow rubberBand animated" data-wow-duration="1000ms">
                        <p>We welcome any question or comment you have - Expect a reply within 24 hours.</p>
                    </div>

                    <!-- Contact Form -->

                    <div id="contactbox">
                    <div id="contactholder">
                    <div class="col-lg-8 col-md-8 col-sm-7 col-xs-12 wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="300ms">
                        <div class="contact-form">

                            <form action="#" id="contact-form">
                                <div class="input-group name-email">
                                    <div class="input-field">
                                        <input type="text" name="name" id="name" placeholder="Name" class="form-control">
                                    </div>
                                    <div class="input-field">
                                        <input type="email" name="email1" id="email1" placeholder="Email" class="form-control">
                                    </div>
                                </div>
                                <div class="input-group">
                                    <textarea name="message" id="message" placeholder="Message" class="form-control"></textarea>
                                </div>
                                <div class="input-group">
                                    <input type="submit" id="form-submit" class="pull-right" value="Send message">
                                </div>
                            </form>
                          </div>
                       </div>
                      </div>
                    </div>

                    <!-- end contact form -->

              </div>
           </div>

        </section>

Answer 1

The width on your contactBox is fine, here is how I like to do it:

Add a col-centered class

<div class="col-centered col-lg-8 col-md-8 col-sm-7 col-xs-12 wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="300ms">
  ...
</div>

And the styles:

.col-centered{
  margin: 0 auto !important;
  float: none !important;
}

Answer 2

You're mixing Bootstrap grid layout with custom stuff. That's a recipe for a headache. Always use the grid for layout and apply your margins and padding only to elements inside the innermost grid boxes in your layout.

Removing your custom widths and using Bootstrap's grid offsets as nature intended takes care of things:

<div class="col-xs-12 col-md-8 col-md-offset-2 ...

Demo

I removed all this, which only fights with Bootstrap:

#contactbox{
    width:60%;
}
#contactholder{
    width:1000px;
}