Solved

Need to "center" my form

Posted on 2013-12-04
6
437 Views
Last Modified: 2013-12-04
I would like to center my form on this page (http://test.bluestarbussales.com/features_leftsidebar%20-%20Copy.html)

I am assuming it is a "simple" line of code I need to add (where and what I do not know)


Here is the code:

<div class="content_full_size">
                  <div class="h2_background">
                    <h2><span>Part Order Form</span></h2>
                    <div class="clr"></div>
                  </div>
                  <div class="clr"></div>
                  <div class="pic"> <div class="pic img_hover_box 1_ico"><a href="http://cdn.pimg.co/p/800x600/205927/fff/img.png" class="prettyPhoto" rel="prettyPhoto[id]"> <img src="images/part_order.png"/>
          	        
          	        </a>
          
      </div> 
                  </div>
                  <div class="separator_clear small"></div>
                  <form action="parts.php" method="post" id="contactform_main">
                                      <ol>
                                        <li>
                                          <input name="name" required class="text" id="name" placeholder="Name (required)"/>
                                        </li>
                                        <li>
                                          <input name="email" required class="text" id="email" placeholder="Email (required)"/>
                                        </li>
                                        <li>
                                          <input name="school" required class="text" id="school" placeholder="School / Business (required)"/>
                                        </li>
                                        <li>
                                          <input id="phone" name="phone" class="text" placeholder="Phone # (required)" required/>
                                        </li>
                                        <li>
                                          <input id="vin" name="vin" class="text" placeholder="Last 8 VIN / Body # (required)" required/>
                                        </li>
                                        <li>
                                          <input id="part" name="part" class="text" placeholder="Part # (optional)" />
                                        </li>
                                        <li>
                                          <input id="description" name="description" class="text" placeholder="Description of Part (required)" required/>
                                        </li>
                                        <li class="buttons">
                                          <input type="submit" name="imageField" value="submit" class="send" />
                                          <!--<input type="image" name="imageField" id="imageField" src="images/sub.png" class="send" />-->
                                          <div class="clr"></div>
                                        </li>
                                      </ol>
                                    </form>
                </div>

Open in new window

0
Comment
Question by:Nicholas_BlueStar
  • 2
  • 2
6 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39696179
in your stylesheet give the form a specific width and margin:auto

That will center it in the parent tag.  If you want is centered in the page, then give the parent a width of 100%.



Cd&
0
 

Author Comment

by:Nicholas_BlueStar
ID: 39696213
you are talking about my style.css right?

How/where do I put in the width and margin:auto?

Here is my style.css

 

* { border:0; margin:0 auto; padding:0; outline:none; }
body { width:100%; margin:0; padding:0; font:normal 12px/150% "Liberation sans", Arial, Helvetica, sans-serif; background:#f6f6f6;}
.body_pattern { background:#f6f6f6; }

/* TEXT EDITOR */
p { line-height:150%; padding:5px 0; color:#a0a0a0; }
p.white { color:#fff;}
a { text-decoration:none; }

h1 {  color:#ffffff;}
h1 small { color:#c3c1c1; font-size:18px; text-transform:none;}

h2 { color:#000000; font-size:14px; padding:10px 0;   }
a.colbox { display: block;}
a h2 span { text-decoration:none; color:#fff; font-size:14px;text-transform: uppercase;}
a:hover h2 span { color:#fff; }

h2.op { color:#000000;  padding:0; margin-top:50px; width:940px; margin-bottom:10px;}
h2.op a{background:#fec223; padding:2px 6px; color:#000!important; text-decoration:none; float:right; font-size:12px!important;}
h2.op span {  color:#fec223;  padding:10px 10px 10px 0; margin:0;  }

h3 { font-size:12px; color:#ffffff;}
a h3 span { text-decoration:none; color:#000000; }
a:hover h3 span { color:#1d5682; }
h3 a {
    -webkit-transition:   0.3s ease;
-moz-transition:   0.3s ease;
-ms-transition:   0.3s ease;
-o-transition:   0.3s ease;
transition:   0.3s ease;
}
h3 a:hover{color:#317BB5!important;}

input, select, textarea { border: none;color:#404040; font-size:12px;  font-family:Arial, Verdana, Helvetica, sans-serif; }
input.required { width: 60%; float: left; border: none; height: 30px; background: #fff; }
input.button { background: #1d5682; color: #fff;  width: 37%; float: left; height: 30px; cursor: pointer; }
/* responsive image */
img {  }
@media \0screen {
	img { width: auto; /* for ie 8 */ }
}

/* IMG  */
a.pic {  position: relative; padding:0; margin:0;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
img.margin_right { margin:0 20px 0 0; }
a.pic img.h { position :absolute; padding:0; top:-1px; bottom:0; left:1px; visibility:hidden; }
a.pic:hover { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); 
-moz-opacity: 0.7; 
-khtml-opacity: 0.7; 
opacity: 0.7; }



a.pic h3 { margin:15px 0 5px 0;}

/* CONTENT */
.body_res { background:none; margin:0; padding:0; max-width:100%;  }
.bg_white{background:#fff;}
.brd{border-bottom:4px solid #87b165;}
.main_resise { margin:0 auto;  
              -webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    
	box-sizing: border-box;   
        
}


/* header */
.preheader { padding:0; margin:0 auto; color:#333333; position:relative; z-index:9999;  margin:0 auto;  
             width: 100%; background: url(../images/dot.png);}
        
.preheader.prefooterg {border-top: none;}
.header { padding:0; margin:0; color:#333333; position:relative; z-index:9999; }
.header_resise {background: #00477b; border-top: 3px solid #2a699a;border-bottom: 3px solid #2a699a; margin: 0 auto;}      
.nav_panel {  }

/* logo */
.logo {
	width: 375px;
	font-size: 30px;
	line-height: 100%;
	text-transform: none;
	font-weight: bold;
	float: left;
	margin-bottom: 5px;
	margin-left: 10px;
	margin-right: 0;
	margin-top: 5px;
}
.logo span {color: #b9c562!important; font-weight: bold!important;}
.logo a { color:#595959; text-decoration:none; font-weight: bold; }
/* RSS_blog */
.RSS_blog {  padding:0; float: left; margin-top: 15px;}
.RSS_blog a { text-align:right; display:inline;}
.RSS_blog img { margin:0 0px 0 3px; }
/* Widget text */
.header_right_text { line-height:13px; font-size:11px; display:block;}
.header_right_text span { display:block;}
/* img */
img.rss1 { background:url(../images/f1.png) no-repeat; width:32px; height:32px; 
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
img.rss1:hover { background:url(../images/f1_a.png) no-repeat; width:32px; height:32px;}
img.rss2 { background:url(../images/f2.png) no-repeat; width:32px; height:32px;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
img.rss2:hover { background:url(../images/f2_a.png) no-repeat; width:32px; height:32px;}
img.rss3 { background:url(../images/f3.png) no-repeat; width:32px; height:32px;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
img.rss3:hover { background:url(../images/f3_a.png) no-repeat; width:32px; height:32px;}
img.rss4 { background:url(../images/f4.png) no-repeat; width:32px; height:32px;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
img.rss4:hover { background:url(../images/f4_a.png) no-repeat; width:32px; height:32px;}
img.rss5 { background:url(../images/f5.png) no-repeat; width:32px; height:32px;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
img.rss5:hover { background:url(../images/f5_a.png) no-repeat; width:32px; height:32px;}
img.rss6 { background:url(../images/f6.png) no-repeat; width:32px; height:32px;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
img.rss6:hover { background:url(../images/f6_a.png) no-repeat; width:32px; height:32px;}
img.rss7 { background:url(../images/f7.png) no-repeat; width:32px; height:32px;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
img.rss7:hover { background:url(../images/f7_a.png) no-repeat; width:32px; height:32px;}


/* content */
.content { margin:0 auto; width:100%; position:relative; margin-top:0px; z-index:999; background:#ffffff;}
.content1 { margin:0 auto; width:100%; position:relative; margin-top:0px; z-index:999;}
.sep{height:3px; background:url(../images/sep.png) center center no-repeat; margin:40px 0 -20px 0; opacity:0.5;}
/* content_text */
.content_text { font-size:18px;line-height:1.6em; padding:20px 0; margin:0 0px;  border-bottom: 3px solid #3ca0db;}
.content_text h1 { display:block; padding:0 10px; margin:0 2%; text-align:center; color: #3ca0db!important;}
.content_text span { display:block; padding:0 10px; margin:0 2%;}
.content_text small { font-size:14px; color:#a6a6a6; display:block; }
.content_text small span { display:inline; font-size:14px; color:#a6a6a6; margin:0; padding:0; }
.content_text img { float:right; margin:0; padding:0; height:50px; }
.content_text img.button_1 { background:url(../images/button_text_hover.png) no-repeat; }
.content_text img.button_1:hover { background:url(../images/button_text.png) no-repeat; }
/*social*/
/*img_hover_box_r_plus*/
.img_hover_box.pic { display: block; position: relative; }
.img_hover_box.pic .img_hover_overlay { position: absolute; top: 0; left: 0; visibility:hidden;  border:none; width:100%; height:100%; padding:0;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
.img_hover_box.pic:hover .img_hover_overlay { visibility:visible; }
.img_hover_box.pic .img_hover_overlay2 {background: #b9c562; position: absolute; top: 0; left: 0; visibility:hidden;  border:none; width:100%; height:100%; padding:0;
-webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
.img_hover_box.pic:hover .img_hover_overlay2 { visibility:visible; background: #b9c562;}

.img_hover_box.pic .r_plus { position: absolute; bottom: 60px; left: 50%; visibility:hidden;  border:none;  margin:0;}
.img_hover_box.pic .r_plus:hover {opacity:1;}
.img_hover_box.pic:hover .r_plus { visibility:visible; }

.img_hover_box.pic .img_hover_overlay { background:url(../images/img_overlay.png) repeat;}
.img_hover_box.pic .img_hover_overlay2 { background:#b9c562 url(../images/img_overlay.png) repeat;}
.img_hover_box.pic .r_plus { background:url(../images/img_hover.png) no-repeat;}
.img_hover_box.pic .r_plus.pos_right { background:url(../images/img_hover_href.png) no-repeat;}

.img_hover_box.pic .r_plus {height:40px; width:40px; margin:-12px 0 0 -12px; }
.img_hover_box.pic .r_plus.pos_left {margin-left:-8px; }
.img_hover_box.pic .r_plus.pos_right {margin-left:2px; }

/*Slider*/
.sliderwrapper {height: 291px; width: 100%; margin: 0 auto;}
.now_slider {position:absolute; z-index:99; padding-top: 0px; margin-top: -105px; width: 100%;}
.home_text { max-width:100%;  margin-top:20px; text-align: center; text-transform: none!important;}
.home_text h1 { padding-bottom:10px;}
.home_text p {font-size: 12px;}
hr {margin-top: 20px; color: #e6e6e6; background: #e6e6e6; border-top: 1px solid #e6e6e6;}

.after_slder { background: url(../images/middlebg.png);}

/* BLOG PAGES */
.main_content {position: relative; width:940px; margin:0 auto; padding:0; max-width: 99%;}

/*now_page*/
.now_page{width:100%; background:url(../images/dot.png); -webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    
	box-sizing: border-box;      border-top: 10px solid #eaeaea;  border-bottom: 4px solid #eaeaea;}
.now_page_res {   margin:0 auto; text-align:center; color:#fff; font-size:12px; position:relative; z-index:100;  }
.now_page_res h1{padding: 20px 0 0px 0; text-transform: uppercase; font-weight: lighter; }
.now_page_res h1 span {color:#00477b!important;}
.now_page_res p {padding-bottom: 30px; color: #c2c2c2;}
.now_page_res .social{ background:#87b165; min-height:50px;  text-align:right; padding-top:25px;}
.now_page_res .tit{color:#fffffe; font-size:18px; font-weight:bold; font-style:normal; margin-bottom:10px;}
h2.title{background:url(../images/bar.png) center repeat-x;;  padding-left:0px; margin: 20px 55px 20px 0; }
h2.title span { display: inline-block; padding: 6px 20px 6px 0; color: #535353; background: #fff; font-weight: lighter;}
h2.title2{background:url(../images/bar.png) center repeat-x;;  padding-left:0px; margin: 20px 0px 20px 0; }
h2.title2 span { display: inline-block; padding: 6px 20px 6px 0; color: #535353; background: #fff;font-weight: lighter;}
/* left_side */
.side_full { width:97%; float:right; margin:2% 1.5%; }
.side_big { width:64%; float:right; margin:2% 0 2%  }
.side_small { width:30%; float:left; margin:2% 0 2%  }

.side_small .content { padding:0;}

/* ul li */
.side_small ul { list-style:none; margin:10px 0; padding:0; }
.side_small ul li { padding:5px 10px 5px 0px; margin:3px 0; font-size:11px; border-bottom:1px solid #f1f1f1; color:#333; }
.side_small ul li a { color:#15acf2; display:block; }
.side_small ul li a:hover { color:#414141; }


/* .right_side_big.l { float:left; } */
/* .right_side { padding:10px 18px; } */

/* coment */
.coment1 { overflow:hidden; margin:3% 0 0 1%; border-top:1px solid #c8c8c8; padding-top:20px; }
.coment2 { overflow:hidden; margin:3% 0 0 20%; border-top:1px solid #c8c8c8; padding-top:20px; }

/* center_colums  */
.columns { margin:0px auto 0 auto; padding:0; }
.columns.margin_board { margin:0 2%; width:96%;}
.colums_box { text-align:left; width:240px; margin:0 10px 0 0; padding:0; float:left; background:#ffffff;}
.colums_box a h2{ padding:0 0 0px 0px; padding-top: 15px; color: #fff;}
.colums_box.last { text-align:left; width:240px; margin:0 0 0 0; padding:0;}
.colums_box.project { text-align:left; width:219px; margin:20px 28px 0 0; padding:0; float:left; }
.colums_box.project:hover{border-bottom:1px solid #fec223;}
.colums_box.project.last { text-align:left; width:219px; margin:20px 0 0 0; padding:0; float:right; }


.colums_box.text_left { text-align:left; }
.colums_box.text_left h2, .colums_box.text_left p { }
.colums_box p.more_bg { padding:15px 0; border:1px solid #f0f0f0; border-top:0; background:#fcfcfc;}
.colums_box:hover p.more_bg  { background:#f0f0f0; }
.col4{width:25%; float:left;}
.col4:hover{}
.col4.last{ margin-right:0; float:right;}
.col4 .tit { padding:10.5% 2% 1% 2%;}
.col4 a h2.ico1{background:url(../images/ico1.png) center left no-repeat; padding-left:35px;}
.col4 a h2.ico2{background:url(../images/ico2.png) center left no-repeat; padding-left:35px;}
.col4 a h2.ico3{background:url(../images/ico3.png) center left no-repeat; padding-left:35px;}
.col4 a h2.ico4{background:url(../images/ico4.png) center left no-repeat; padding-left:35px;}
.col4 a h2:hover{color:#87b165!important;}
.col4 .col_text{padding:5px 20px 25px 10px; font-size:12px; line-height:22px;}
.col4 .col_text p{ color:#a9a9a9;}
.col2{float:left; width:49%; margin:0% 2% 2% 0; background:#fff; }
.col2.last{ margin:0% 0% 2% 0;}
.col2 .tit{border-bottom:1px solid #e6e6e6; padding:15px 20px 10px 20px;}
.col2 .col_text{padding:2.5% 2% 2% 2%;}
.col2 a h1{background:url(../images/tit_bg_big.png) center left no-repeat; padding-left:20px; text-transform:none;}
/*latest work*/
.l_w_item{float:left; width:45%; margin-right:10px;}
.l_w_item p {margin-bottom:20px; font-size:11px;}
.l_w_item h3 {font-weight:normal; margin-top:20px; margin-bottom:10px;}
.butt{background:#a8be0f; border-radius:2px; color:#fff!important; padding:4px 10px;}
h2 img { position:relative; top:0px; padding-right:0px;}
/*item_features*/
.feat_item{padding-left:70px;}
.feat_item p {line-height:22px;}
.item1{background:url(../images/service.png) center left no-repeat;}
.item2{background:url(../images/service2.png) center left no-repeat;}
.item3{background:url(../images/service3.png) center left no-repeat;}

/* colums_box */
.bluecap {background: #00477b; width: 100%; height: 50px; color: #fff;}
.colums_box.no_bg { border:none; text-align:center; width:23%; margin:0% 2.6% 0% 0;  float:left; }
.colums_box.no_bg.last {   margin:0% 0% 0% 0;  float:left;}
.colums_box.no_bg p { color:#747474; font-size:12px; margin-top: 90px;  padding-bottom: 15px;}
.colums_box.no_bg:hover p{color: #fff;}
.colums_box.no_bg:hover .bluecap {background: #2a699a;}
.colums_box.no_bg:hover a h2 span {color: #fff!important;}
.colums_box.no_bg img {
    margin-bottom: 20px;
    -webkit-transition:   0.5s ease;
-moz-transition:   0.5s ease;
-ms-transition:   0.5s ease;
-o-transition:   0.5s ease;
transition:   0.5s ease;}
.colums_box_1  { background: #fff url(../images/h1.png) 78px 65px no-repeat;}
.colums_box_1:hover  { background: #317bb5 url(../images/h1a.png) 78px 65px no-repeat;}
.colums_box_2 { background:  #fff url(../images/h2.png) 78px 65px no-repeat;}
.colums_box_2:hover { background: #317bb5 url(../images/h2a.png) 78px 65px no-repeat;}
.colums_box_3 { background: #fff url(../images/h3.png) 78px 65px no-repeat;}
.colums_box_3:hover { background: #317bb5 url(../images/h3a.png) 78px 65px no-repeat;}
.colums_box_4 { background: #fff url(../images/h4.png) 78px 65px no-repeat; }
.colums_box_4:hover { background:#317bb5 url(../images/h4a.png) 78px 65px no-repeat;}

/* content_blog */
.content_blog { padding:0; }
.content_blog ul { list-style:none; }
.content_blog li { background:url(../images/ul_li_body.png) left no-repeat; padding:2px 0 2px 15px; }
.content_blog li a { font-weight:bold; font-style:italic; color:#8f8f8f; font-size:11px; }
.content_blog li a:hover {color:#db7641;}

/* prefooter */
.prefooter {  padding:0; margin:0; max-width:100%;  margin-top:0px; background: #1d5682; border-top: 1px solid #d9d9d9;}
.prefooter_resise { margin:0 auto; padding: 40px 0;  
 -webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    
	box-sizing: border-box;  }
.prefooter h3 {padding:0px 0px 20px; margin-bottom:10px;  color: #fff!important; font-size: 18px!important; text-transform: uppercase; font-weight: lighter;}
.prefooter h3.log{font-size:30px!important;}
.prefooter h3.log span{color:#fec223;}
.prefooter p { color:#a9a9a9; font-size:12px; line-height:1.5em; padding:0px 0 5px; }
.prefooter p span{color:#afafaf; font-size:12px;}
.prefooter a { color:#25a9ff;  }
/* Flickr */
.widget_flickrRSS { }
.widget_flickrRSS img { border: 0; background:#484848; text-align: center; margin:0px 7px 7px 0; width:60px; height:60px; }
.widget_flickrRSS img.last { margin:7px 0; }
.widget_flickrRSS img:hover {  }
/* footer */
footer { color:#aecae0; font-size:11px;  text-align:left;; padding:20px 0; margin:0; background:#00477b; width: 100%; margin: 0 auto;}
footer a { color:#aecae0!important; text-decoration:none; }
/*-------------------------------------*/
/* search */
.selectnav {display: none;}
.search { margin:7px 0px 0px 0;  padding:0px 0 0 0; width:auto; height:30px;  margin-right: 0px;  width: 160px; margin-top: 7px; padding:5px 0px 5px 0;  float:right;}
.search form { padding:0; width:auto; }
.search label { padding:2px 10px 0 0;}
.search span { display:block;  padding:0;  background:url(../../images/search_bg.png) no-repeat left top; }
.search input.editbox_search {  -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;padding:0px 0px 0px;  width:100%; height:30px; font-size:12px; line-height:16px; color:#b4b4b4; background: #fafafa url(../images/searchicon.png) right center no-repeat;  padding-left: 5px; box-sizing: border-box;  -moz-box-sizing: border-box;  -o-box-sizing: border-box; -webkit-box-sizing: border-box;}
.search input.button_search {  padding:0; border:none; float:left; }

a.fl { margin:10px 10px 10px 0; float:left; padding:0; }
/* img */
img.fgh { background:#3d3d3d; padding:4px; margin:0 3px 0 0; float:left; }
img.fgh:hover { background:#e05d1f; }

/*== Sitemap Page Template ==*/
.sitemap-page { line-height: 160%; }
.sitemap-page h4 { margin-bottom: 5px; font-weight: normal; }
.sitemap-page h3 { padding-bottom: 10px; margin-bottom: 15px; }
.sitemap-page ul { margin-bottom: 20px; }
.sitemap-page ul li { margin: 1px 2%; }
.sitemap-page ul li ul { margin: 1px 2%; }
.sitemap-page ul li a { color: #656464; }
/*== Timeline Page Template ==*/
#archives { padding: 10px 0 0; line-height: 160%; }
#archives a { font-style: normal; color: #656464; }
#archives .archives_list { border-left: 1px solid #e1e1e1; list-style: none; margin: 0 0 15px 15px; }
#archives .archives_list li { margin: 2px 0; clear: left; padding-left: 24px; font-size: 0.9em; font-style: normal; list-style: none; }
#archives .archives_list .date { color: #727272; width: 20%; font-style: normal; display: inline-block; vertical-align: top; }
#archives .archives_list .linked { width: 50%; display: inline-block; vertical-align: top; }
#archives .archives_list .comments { width: 20%; display: inline-block; vertical-align: top; }
#archives .archives_list .comments a { color: #7e7e7e; font-size: 0.9em; font-style: italic; text-decoration: underline; padding-left: 13px; }
#archives .archives_list .comments a:hover { text-decoration: none; }
h3.archive_year { font-weight: normal; font-size: 1.4em; color: #585858; margin-top: 0; padding: 0px; }
/*== Breadcrumb ==*/
.breadcrumbs { padding: 10px 0; width: 100%; overflow:hidden; font-size: 12px; }
.breadcrumbs a { font-size:12px; color:#ffffff;}

/*- Message -*/
.message div { margin:0 0 18px; }
.message input { padding:9px 15px; width:90%; border: 1px solid #ddd; color:#000; }
.message textarea { height:114px; overflow:auto; padding:9px 15px; width:90%; border: 1px solid #ddd; }
.message .submit { float:left; }
.message .submit input { background:#fff; width:128px; height:32px; font-weight:bold; color:#000; }
.message .btn { padding:0; width:auto; }
.message .notice { color:#a4a4a4; float:right; font-style:italic; padding:10px 0 0; }

/* contact-us */
.contact_us div { padding:3px 5px;}
.contact_us div input[type=text] { width:70%;}
.contact_us div textarea { width:95%; height:70px;}

/*- Post Comments -*/
.post-comments h2 { padding-top:10px; }
.post-comments .fl { width:80px; padding:0 10px 0 0; }
.post-comments .fr { width:100%; margin-right: 0; }
/* post-commets */
.post-commets { padding:2px 0 0 0; margin:5px 0 0 0; float:right; width:42px; height:28px; text-align:center; }
.post-commets a { color:#fff; font-size: 18px; text-decoration:none; }

/*- Box2 -*/
.box2 { background:#f9f9f9; border:1px solid #ddd; width: 480px; height:1%; margin:0 0 20px; padding:10px; min-height:100px; }
.box2.alt { background:#FFFFFF; }
.box2.alt { background:#FFFFFF; }
.comm-name, .comm-date { line-height:20px; font-size: 80%; }
/*=== Sub Columns ===*/
.cols { float:left; width:45%; }
.cols:first-child { padding:0 15px 0 0; }
.col ul li { border-bottom:1px solid #EAEAEA; clear:both; padding:8px 0 8px; }
.col.popular-posts li { border-bottom:none; padding:0px 0 0px; }
.col.popular-posts li { min-height:65px; }
.col ul li img { float:left; margin:0 10px 0 0; max-height:58px; max-width:58px; border:1px solid #EAEAEA; padding:4px; background:#fff; }
.col.widget_recent_entries { float:right; }
.col span { float:left; width:65%; }
.cols ul { list-style: none; }
.col ul li a:hover { text-decoration:underline; }

/* Global */
.clr { clear:both; height:0; margin:0 auto; padding:0;  overflow: hidden;}
.bg { clear: both; border-bottom:1px solid #f1f1f1; margin:20px 0; padding:0; height:1px; }
.left, .fl { float:left; }
.right { float:right;}
img.fl { float:left; margin:5px 15px 0 0; }

a.post{background:url(../images/arr_post.png) center left no-repeat; padding-left:10px; color:#a9a9a9!important;}
a.post span{padding-left:10px; color:#fec223;}

a.getstarted {font-size: 20px; color: #fff!important; padding: 10px 40px; background: #85af64; -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; margin: 20px 0; display: inline-block;}


.feelfree { float: left; color: #7d7d7d; font-size: 12px; margin-top: 22px; margin-bottom: 20px; text-transform: uppercase;}
.feelfree span {color: #b9c562;}



.content_full_size { width:100%;  padding-bottom: 40px;}

/*sub_page_blog*/
.post h3 { padding-top:15px; padding-bottom:0; margin-bottom:0; font-size:16px; font-weight:normal; color:#414141; }
.post h3 a,
.post h3 a:hover {  }

.post h2 {margin-bottom:0; }
.post h2 a{ font-weight:bold;}

.post .pic { margin:0 0 20px; }
.post_detail { color:#a4a4a4; font-style:normal; padding:0; font-size:11px; font-weight:normal; margin:5px 0 5px 0; }
.post_detail a { font-size:11px; color:#a4a4a4; font-weight:bold; font-style:normal; text-decoration:none; }
.post_detail a:hover { font-size:11px; color:#a4a4a4; text-decoration:none; }
.post_date {  color:#fff; font-style:normal; font-weight:normal; font-size:18px; float:left; text-align:center; padding:8px 15px; background:#e25e54; border-top:3px solid #353535; margin:0 20px 20px 0; display:none;}
.post_date span { color:#fff; font-style:normal; font-weight:normal; font-size:12px; display:block; margin-top:5px; padding:5px 3px 0; text-align:center; border-top:1px solid #fff; }


.post_detail a.read_more:hover { color:#e25e54; font-style:normal; font-weight:normal; }

/*coments*/
#coment { overflow:hidden; margin:10px 0; padding-bottom:10px; }
#coment img { float:left; margin-right:20px; }
#coment h3 { margin:0; padding:0; }
#coment .podpis {  margin:5px 0;  }
#coment .podpis a { margin-left:10px; }
#coment2 { overflow:hidden; margin:10px 0 00px 50px;  padding-bottom:10px; }
#coment2 img { float:left; margin-right:20px; }
#coment2 h3 { margin:0; padding:0; }
#coment2 .podpis {  margin:5px 0 0 0;  }
#coment2 .podpis a { margin-left:10px; }
#coment3 { overflow:hidden; margin:10px 0 00px 100px;  padding-bottom:10px; }
#coment3 img { float:left; margin-right:20px; }
#coment3 h3 { margin:0; padding:0; }
#coment3 .podpis {  margin:5px 0 0 0;  }
#coment3 .podpis a { margin-left:10px; }
#coment3 .lin { border-top:1px solid #c8c8c8; margin-top:20px; }

/*form Contact_us*/
#contactform_main { margin:0; padding:5px 0; }
#contactform_main * { color:#8b8b8e; }
#contactform_main ol { margin:0; padding:0; list-style:none; }
#contactform_main li { margin:0; padding:0; background:none; border:none; display:block; clear:both; }
#contactform_main li.buttons { margin:5px 0 5px 0; clear:both; }
#contactform_main label { margin:0; width:60px; padding:6px 0; text-transform:none; float:left; font-weight:normal; color:#8b8b8b; }
#contactform_main label .ness { color:#656566; }
#contactform_main label span { color:#8b8b8b; }
#contactform_main input.text { width:55%; border:1px solid #d3d3d3; margin:5px 0; padding:5px 2px; height:16px; background:#ffffff; float:left; font-size:12px; color:#8b8b8e; }
#contactform_main textarea { width:83%; border:1px solid #d3d3d3; margin:4px 0; padding:5px 2px; background:#ffffff; float:left; font-size:12px; color:#8b8b8e; }
#contactform_main li.buttons input {cursor: pointer; padding:2px 10px 4px 10px; margin:10px 0 0 60px; border:0; color:#FFF; float:left; background:#2A699A; font-size:14px; font-weight:bold; }


/*h3.h3_act_href*/
h3.h3_act_href { clear:both; width:100%; text-align:left; display:block; background:none; padding-left:0; height:15px; margin-bottom: 10px;}
h3.h3_act_href a span,
h3.h3_act_href a{ color:#313131; text-decoration:none; font-weight:bold; 
 -webkit-transition:   0.3s ease;
-moz-transition:   0.3s ease;
-ms-transition:   0.3s ease;
-o-transition:   0.3s ease;
transition:   0.3s ease;}
h3.h3_act_href a:hover span,
h3.h3_act_href a:hover em,
h3.h3_act_href a:hover{color:#317BB5; text-decoration:none;  }
h3.h3_act_href a.h3_href em {font-style:normal;}

h3.h3_act_href a.h3_href {padding:8px 0 12px 40px;}

h3.h3_act_href a.ico_1{background:url(../images/ico.png) no-repeat left top;
 -webkit-transition:   0.3s ease;
-moz-transition:   0.3s ease;
-ms-transition:   0.3s ease;
-o-transition:   0.3s ease;
transition:   0.3s ease;}
h3.h3_act_href a.ico_2{background:url(../images/ico-02.png) no-repeat left top;
 -webkit-transition:   0.3s ease;
-moz-transition:   0.3s ease;
-ms-transition:   0.3s ease;
-o-transition:   0.3s ease;
transition:   0.3s ease;}
h3.h3_act_href a.ico_3{background:url(../images/ico-03.png) no-repeat left top;
 -webkit-transition:   0.3s ease;
-moz-transition:   0.3s ease;
-ms-transition:   0.3s ease;
-o-transition:   0.3s ease;
transition:   0.3s ease;}
h3.h3_act_href a.ico_4{background:url(../images/ico-04.png) no-repeat left top;
 -webkit-transition:   0.3s ease;
-moz-transition:   0.3s ease;
-ms-transition:   0.3s ease;
-o-transition:   0.3s ease;
transition:   0.3s ease;}
h3.h3_act_href a.ico_1:hover{background:url(../images/ico_a.png) no-repeat left top; color:#19aae3;}
h3.h3_act_href a.ico_2:hover{background:url(../images/ico_a-02.png) no-repeat left top; color:#19aae3;}
h3.h3_act_href a.ico_3:hover{background:url(../images/ico_a-03.png) no-repeat left top;color:#19aae3;}
h3.h3_act_href a.ico_4:hover{background:url(../images/ico_a-04.png) no-repeat left top;color:#19aae3;}

.cols2 {margin-top: 20px;}


h3.blogpost a {font-size: 16px!important; }

h3.blogpost span {margin-top: 5px; display: block; color: #009ceb;}

.bar {width: 100%; background: url(../images/bar.png) repeat-x; height: 10px;}

.fleft50 {
    float: left;
    width: 49%;
}
.fright50 {
    float: right;
    width: 49%;
}

p.date {
    font-size: 10px!important; 
    color: #a9a9a9;
    border-bottom: 1px solid #e9e9e9;
    padding: 0 0 5px 0!important;
}


a.readmore {
    color: #78b312!important;
    text-decoration: none;
    font-size: 12px;
    padding-bottom: 10px;
}

a.readmore:hover {
    color: #78b312!important;
    text-decoration: underline;
    font-size: 12px;
    margin-bottom: 10px!important;
}

p.test {
    display: block;
    background: url(../images/test.png) no-repeat;
    font-size: 12px;
    color: #d1d1d1;
    padding: 30px 20px 30px 60px;
    font-style: italic;
     -webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    
	box-sizing: border-box;  
        width: 460px;
        height: 130px;
}

.picfloat {float: left;}
.namefloat {margin-left: 10px; float: left;}
.name {font-weight: bold; color: #484848!important;}

/* footer box */
.prefooter_box:after { clear: both; content: ""; display: block; }
.prefooter_box { width: 100%; margin:0 0 0 0; }
.prefooter_box > div { float: left; vertical-align: top; }
.prefooter_box > div:first-child, .prefooter_box > article:first-child { margin-left: 0; }
.prefooter_box > div:last-child, .prefooter_box > article:last-child { margin-right: 0; }
.pref_box { width:32%; float:left; margin:0 1.3333% 3% 0; padding:0; }
.pref_box.about{margin-right:90px;}
.pref_box.contact{width:150px;}
.pref_box p{color:#aecae0; font-size:12px; }
.pref_box a{color:#5d5d5c!important; text-decoration:underline;}
.pref_box p.bold{font-weight:bold;}
.pref_box .tit {margin-bottom:20px; color:#fff; font-size:18px; margin-top: 30px;}
.pref_box.last {  float:left; margin:0 0 3% 0; padding:0; }
.Flickr { width:20%;  margin:3% 5.3333% 3% 0;}

.menudiv {
    width: 100%;
    border: 1px solid #eaeaea;
    border-left: none;
    border-right: none;
}


/*4cols_gallery*/
.cols44{overflow:visible!important;}
.col44 { width:245px; float:left; padding:0; margin-right:0px; position:relative;  top:0; }
.col44 h3 { position:relative; bottom:0px; margin-bottom:0px;}
.col44 a img { margin-top:0px;}
.col44.last { float:right; margin:0; margin-right:0px;}
.col44.invisible-box { display: none; opacity: 0;  z-index: 1;}
.mask {
    left:0px;
	top:0px;
	background: #b9c562;
		-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	width:100%;
	height:100%;
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
	z-index:999;
	position:absolute;
		
	padding:0px;
}
.mask span{
    display: block;
	color:#ffffff;
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;
	position: relative;
         text-align: left;
         left: 5%;
         bottom: -140px;
        
}
.mask p{
     display: inline-block;
	color:#fff!important;
	font-size:12px;
	padding-top:0px;
	line-height:20px;
        
        
        position: relative;
         text-align: left;
         left: 5%;
         bottom: -125px;
}
a.info {
	display: block;
	text-decoration: none;
	background: url(../images/ico_link.png) no-repeat;
	position:absolute;
        
	bottom:70px;
	left:5%!important;
	width:30px!important;
	height:30px!important;
	opacity:0.8;
	overflow:hidden;
}
a.info:hover{
	opacity:1;
}
a.link {
	display: block;
	text-decoration: none;
	background: url(../../images/ico_full.png) no-repeat;
	position:absolute;
	bottom:41px;
	left:41%!important;
	width:19px!important;
	height:16px!important;
	opacity:0.8;
}
a.link:hover{
	opacity:1;
}
.pic.img_hover_box:hover{
	cursor:pointer;
}
.pic.img_hover_box:hover .mask {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

img.bb {border-bottom: 3px solid #b9c562;}

.somebg {
    width: 100%;
    background: url(../images/dot.png);
    padding: 5px 0 40px;
}

.hrenover {
    background: #fff;
    padding: 10px 0;
    margin-top: -5px;
}

.hrenover:hover {
    background: #00477b;
}

.hrenover:hover h3 a {
    color: #fff!important;
}

.hrenover:hover p {
    color: #fff!important;
}


/* prefooter */
.prefooter { padding:0px 0; margin:0 auto; }
.prefooter h2 { font-size:14px; color:#fff; padding:15px 0; margin:0; }
.prefooter p { color:#fff; font-size:12px; line-height:1.5em; padding:5px 0; }
.prefooter a { color:#c1c1c1; font-style:italic; }
.pref_blog { width:23%; float:left; margin:0px 15px 5px 0; padding:0; }
.pref_blog.last { margin:0px 0 5px 0; }
a.fl { margin:10px 10px 40px 0; float:left; padding:0; }


#mailform-subscribe {
	color: #fff;
	padding: 20px 15px;
	text-shadow: 1px 1px #111;
}
#mailform-subscribe input {
	font-size: 13px;
	margin-bottom: 10px;

	border-radius: 6px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border:1px solid #cccccc;
}
#mailform-subscribe input.email {
	background: #fff url(../images/mailform-subscribe.png) no-repeat 10px center;
	padding-left: 32px
}
#mailform-subscribe input[type="submit"] {
	width: 73px;
	margin:0px 0 0 0px;
	background-color: #1D5682;
	border-bottom: 1px solid rgba(0,0,0,0.25);
	border-radius: 0px;
	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
	color: #ffffff!important;
	cursor: pointer;
	display: inline-block;
	moz-border-radius: 0px;
	moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	padding: 5px 4px 5px 4px !important;
	position: relative;
	text-decoration: none;
	text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
	webkit-border-radius: 0px;
	webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	font-size: 11px;
	border-radius: 5px;
	font-weight: normal;
	line-height: 1;
        height: 30px;
}
#mailform-subscribe input[type="submit"]:hover {
	
	color: #fff;
}
#mailform-subscribe input[type="submit"]:active {
	top: 1px
}

.content_page {
    background: #fff;
}

.content_full_size { width:100%; }
/*centercol*/
.centercol { width:65%; float:left; padding:0; }
.centercol.last {float:right;}
/*sidebar*/
.sidebar {width:30%; float:left;  }
.sidebar.last { float:right; }


.p404 h2{ font-size:50px!important; color:#e25e54!important;  text-align:center; margin:0px auto 0; line-height:1.2em;  background:none;padding-top: 40px; }
.p404 h2 span{ font-size:22px;  color:#7D7D7D; text-align:center; margin:10px auto 0; line-height:1.2em; }
.p404 p,.p404 a{ font-size:24px; color:#B4B4B4; text-align:center; padding:40px 0 60px; line-height:1.2em; }
.p404 p span { font-size:24px; display:block; text-align:center; margin:20px auto; line-height:1.2em; }
.p404 h2,
.p404 .btn { margin-bottom:0; }
.p404 .content_box { margin-bottom:40px; }

.pic.fl { margin:5px 20px 10px 0; }
.pic.fr { margin:5px 0 20px 10px; }
.fl { float:left; }
.fr { float:right; }

.h2_background {position:relative; padding-top: 30px;}
.h2_background h2 { color: #515151!important; width:100%; margin:0px 0 20px 0; padding:0;}
.h2_background h2 span{ padding:10px 20px 10px 0; }

.img_hover_box.pic a img.h2 { position: absolute; top: 0; left: 0; visibility:hidden; background:rgba(0,0,0,0.5) url(../images/img_z.png) center center no-repeat; border:none; display:none; width:100%; height: 100%; }
.img_hover_box.pic a:hover img.h2 { visibility:visible; display:block; }

/*3cols*/
.cols3 { margin:0px auto 0; width:100%; padding:0; text-align:left; }
.col3 { width:30%; margin:0 35px 0 0; float:left; padding:0;  }
.col3 p { margin:0; padding:0; }
.col3.last { float:right; margin-right:0; }

.tangodiv {float: left;margin-left: 28px;}

/*4cols*/
.cols4p { margin:0 auto; width:100%; padding:0; text-align:left; }
.col4p { width:24%; margin:0 12px 0 0; float:left; padding:0;  }
.col4p.last { float:left; margin-right:0; }
.cols4p.bg {background:url(../images/cols4_bg.png) repeat-y top left; padding:10px 0;}
.center_side { margin-top:20px; padding-top:20px; background:url(../images/border.png) repeat-x left bottom; padding-bottom:40px;}
.center_side h2 { display:block; float:left; }

.margin {padding-top: 20px;}

.pluginConnectTextDark {color: #fff!important;}
.nav_panel .tinynav { display:none; }
.slidertop { margin-top: -113px; }
.slidertop1 { margin-top: -119px; }
.sliderwraperheight { height: 500px; }
#slider-wrapper object { width: 100%; }
.pic img { max-width: 100%; height: auto; }
 /* special */
.right { float: right; }
.container #coment img { width: auto; }
.container #coment2 img { width: auto; }
.container #coment3 img { width: auto; }
.two { display: none; }
.content_resize.adder .col2.last { float: right; }
.change img {
	width: 227;
	height: auto;
}
.change h1 { color: #fff!important; text-align: left; }
.change.some h1 span { display: inline; color: #fff;}
.change.some h3 { color: #fff!important; }
.change.some h2 { margin-top: 3px!important; text-align: center!important; font-size: 20px!important; line-height: 30px!important; font-weight: bold!important; color: #fff!important; }
.change.some h1 {
	margin-top: 3px!important;
	text-align: center!important;
	font-size: 30px!important;
	line-height: 30px!important;
	font-weight: bold!important;
	color: #fff!important;
}
.change.some .col2 { width: auto; float: none; }
.change.some .col3 { width: auto; float: none; }
.change.some .col4 { width: auto; float: none; }
.change.some .header_row_2 h2 { color: #474747!important; }
.change.some  h1.left { text-align: left!important; }
.product img { width: 100%; height: auto; }
.code { padding: 0 12px; width: auto; }
.code h1 { padding: 20px 0 10px 20px; text-align: left; font-size: 24px; color: #fff!important; font-weight: bold; }
.code h3 { font-weight: bold!important; }
.code img { width: 100%; height: auto; }
#ticker1 .tweet_list.tweet_even, #ticker1 .tweet_list, #ticker1 .tweet_list .tweet_even { background: none; color: #fff; }
.column_2 .col2 { background: none; }
.dc_pricingtable05 ul.borderright, .dc_pricingtable05 ul.borderleft, .dc_pricingtable05 ul.borderleft, .dc_pricingtable05 ul.borderleft, .dc_pricingtable06 ul.borderright, .dc_pricingtable06 ul.borderleft { list-style: none; }

Open in new window

0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39696232
While adding margin:auto will centre an element, the problem you will encounter is that the inputs in your form are set to a width of 55%, so if you set a width to the form, your inputs will be 55% of that width. As well as adding a width and margin to your form, you'll need to reset the width of your form elements:

//style.css - line 483
#contactform_main { width: 350px; margin: 0px auto; }

//style.css - line 491
#contactform_main input.text { width: 344px; } 

Open in new window

0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39696235
@Nicholas_BlueStar - there's really no need to paste your entire CSS file - we can see it on your site :)
0
 

Author Comment

by:Nicholas_BlueStar
ID: 39696312
haha shoot, sorry!

Im a novice at this stuff for sure.

After your help I have decided to just change 55% to 90% to make it look better within the page.

Thanks for all the help!
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now