Contact Form CSS

Question

Help needed with centering the entire form. also want the form to stay centered when browser window gets smaller and bigger and for input fields to adjust accordingly.

It seems to be half centered and half align left, but I played with that and it didn't want to move...

/* CSS goes below this line! */

#ois-2 .ois-14-button, #ois-2 input[type='submit'].ois-14-button {
	background-color: #fd3f3f !important;
	border-color: #fd3f3f !important;
	border-width: 0px !important;
	font-size: 16px !important;
	font-family: 'Helvetica', Helvetica, sans-serif !important;
	height: 31px !important;
	border-radius: 7px !important;
	color: #ffffff !important;
	font-weight: 400 !important;
	width: 200px !important
}
#ois-2 .ois-14-email-input {
	padding-bottom: 4px !important;
	padding-left: 5px !important;
	padding-right: 2px !important;
	padding-top: 4px !important;
	text-align: left !important;
	width: 200px !important;
	border-radius: 5px !important;
	margin-top: 10px !important;
	margin-bottom: 10px !important;
}
#ois-2 .ois-14-Name-input {
	padding-bottom: 4px !important;
}
#ois-2 .ois-14-name-input {
	padding-left: 5px !important;
	padding-right: 2px !important;
	padding-top: 4px !important;
	text-align: left !important;
	width: 200px !important;
	border-radius: 5px !important;
	margin-top: 10px !important;
	margin-bottom: 0px !important;
}

#ois-2 .ois-14-title {
	text-align: center !important;
	font-size: 18px !important;
	font-family: 'Helvetica', Helvetica, sans-serif !important;
	line-height: 21px !important;
	font-weight: 700 !important;
	margin-top: 0px !important;
	margin-bottom: 10px !important;
}
#ois-2 .ois-14-inner {
	border-color: #efefef !important;
	border-width: 1px !important;
	background-color: #e2e2e2 !important;
	border-radius: 4px !important;
	padding-bottom: 10px !important;
	padding-top: 10px !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
}
#ois-2 .ois-14-outer {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 0px;
	margin-right: 0px;
}
#ois-2 .ois-14-form {
	text-align: center !important;
}

fieldset { float: left; width: 200px; border: 0; padding: 0; margin: 0;}
#left {margin-right: 20px; }
#right { margin-right: 0px; }
label {float: left;}
input {clear: both;; float: left}


/* End custom style */
/* End of file */

<div class='ois-design'>

	<div id='ois-2' class='ois-design' >
<div class="ois-outer ois-14-outer">
	
<div class="ois-14-inner ois-inner">

<div class="ois-14-title">
Enter your name & email for access to our class schedule and amazing web special!</div>
		
<div class="ois-14-subtitle"></div>
		
		
<div class="ois-14-form">
			
<form method="post" id="ois-form-2" data-service="aweber" >
<div class="ois-14-name-input-wrapper">
<fieldset id="left">
<input type="text" name="name" class="ois-14-name-input ois-name-input ois-form-control" placeholder="Your Name"></fieldset>

<fieldset id="right">
<input type="text" name="email" class="ois-14-email-input ois-email-input ois-form-control" placeholder="Your Email"></fieldset>
</div>

<div class="ois-14-button-wrapper">

<input type="submit" class="ois-btn ois-14-button" />
</div>
</form>
		</div>
	
</div>

</div>
</div>

</div>

Answer 1

I've changed a couple things, specifically removed all floats on the inputs, restructured your divs a bit more clearly and added a margin: auto to your form. I'd also suggest rethinking your markup and have less classes. A lot of them are redundant and do the same things.

fieldset { 
    display: inline-block;
    width: 200px; 
    border: 0; 
    padding: 0; 
    margin: 0;
}

#ois-2 .ois-14-button, #ois-2 input[type='submit'].ois-14-button {
    background-color: #fd3f3f !important;
    border-color: #fd3f3f !important;
    border-width: 0px !important;
    font-size: 16px !important;
    font-family: 'Helvetica', Helvetica, sans-serif !important;
    height: 31px !important;
    border-radius: 7px !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    width: 200px !important
}
#ois-2 .ois-14-email-input {
    padding-bottom: 4px !important;
    padding-left: 5px !important;
    padding-right: 2px !important;
    padding-top: 4px !important;
    text-align: left !important;
    width: 200px !important;
    border-radius: 5px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    margin: auto;
}
#ois-2 .ois-14-Name-input {
    padding-bottom: 4px !important;
}
#ois-2 .ois-14-name-input {
    padding-left: 5px !important;
    padding-right: 2px !important;
    padding-top: 4px !important;
    text-align: left !important;
    width: 200px !important;
    border-radius: 5px !important;
    margin-top: 10px !important;
    margin-bottom: 0px !important;
    margin: auto;
}

#ois-2 .ois-14-title {
    text-align: center !important;
    font-size: 18px !important;
    font-family: 'Helvetica', Helvetica, sans-serif !important;
    line-height: 21px !important;
    font-weight: 700 !important;
    margin-top: 0px !important;
    margin-bottom: 10px !important;
}
#ois-2 .ois-14-inner {
    border-color: #efefef !important;
    border-width: 1px !important;
    background-color: #e2e2e2 !important;
    border-radius: 4px !important;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}
#ois-2 .ois-14-outer {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 0px;
    margin-right: 0px;
}
#ois-2 .ois-14-form {
    text-align: center !important;
    margin:auto;
}

body {
    /*width: 500px;*/
}

fieldset { 
    display: inline-block;
    width: 200px; 
    border: 0; 
    padding: 0; 
    margin: 0;
}

<body>
    <div class='ois-design'>

        <div id='ois-2' class='ois-design' >
            <div class="ois-outer ois-14-outer">
                <div class="ois-14-inner ois-inner">
                    <div class="ois-14-title">
                        Enter your name &amp; email for access to our class schedule and amazing web special!
                    </div>
            
                    <div class="ois-14-subtitle"></div>
                </div>
            </div>
            
        <div class="ois-14-form">       
            <form method="post" id="ois-form-2" data-service="aweber" >
                <div class="ois-14-name-input-wrapper">
                    <fieldset id="left">
                        <input type="text" name="name" class="ois-14-name-input ois-name-input ois-form-control" placeholder="Your Name" />
                    </fieldset>

                    <fieldset id="right">
                        <input type="text" name="email" class="ois-14-email-input ois-email-input ois-form-control" placeholder="Your Email">
                    </fieldset>
                </div>

                <div class="ois-14-button-wrapper">
                    <input type="submit" class="ois-btn ois-14-button" />
                </div>
            </form>
        </div>
    </div>
</body>

Answer 2

You don't need to make the input fields float

With the width, you can use

input[type="text"] {
   width: 30vw;
}

Jsfiddle attached below

https://jsfiddle.net/fae4xb7e/