Solved

Need to "center" my form

Posted on 2013-12-04
6
438 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 43

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 43

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

863 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

28 Experts available now in Live!

Get 1:1 Help Now