Как сделать блок строго по центру?

219
15 ноября 2018, 09:50

Как сделать блок по центру? он смещен немного вправо. Так не должно быть. Верстаю с bootstrap. Помогите пожалуйста.

#second { 
	background: #f7f7f7; 
	height: 653px; 
	width: 1040px; 
	margin: 0 auto; 
	-webkit-box-shadow: 0px 8px 7px 3px rgba(0,0,0,0.22); 
	-moz-box-shadow: 0px 8px 7px 3px rgba(0,0,0,0.22); 
	box-shadow: 0px 8px 7px 3px rgba(0,0,0,0.22); 
} 
.second_content_center { 
	margin-top: -88px; 
	padding: 1px; 
	background: #fff; 
	height: 650px; 
	position: relative; 
	z-index: 9; 
} 
.form_contacts_left h4 { 
	font-size: 18px; 
	font-weight: 900; 
	text-transform: uppercase; 
	margin-bottom: 5px; 
} 
.form_contacts_left span { 
	font-size: 16px; 
	font-weight: 100; 
} 
.form_contacts_left_email_icon { 
	margin-right: 26px; 
	margin-bottom: 47px; 
} 
.form_contacts_left_phones_icon { 
	margin-right: 33px; 
	margin-bottom: 47px; 
} 
.form_contacts_left_skype_icon { 
	margin-right: 26px; 
} 
.form_contacts { 
	background: #11b2f5; 
	width: 100%; 
	height: 468px; 
	border-radius: 4px; 
	margin-top: 53px; 
	padding: 1px; 
} 
.form_heading_contacts { 
	font-size: 25px; 
	font-weight: 900; 
	text-transform: uppercase; 
	color: #fff; 
	margin-top: 40px; 
	margin-bottom: 15px; 
} 
.form_text_contacts { 
	font-size: 18px; 
	font-weight: 100; 
	text-transform: uppercase; 
	color: #fff; 
	margin-bottom: 20px; 
} 
.form_input_contacts { 
	width: 90%; 
	height: 53px; 
	background: #30c2ff; 
	border: 1px solid #fff; 
	border-radius: 3px; 
	margin-bottom: 7px; 
	padding-left: 35px; 
} 
.form_btn_contacts { 
	width: 90%; 
	height: 55px; 
	background: transparent; 
	border: 2px solid #fff; 
	border-radius: 3px; 
	font-size: 13px; 
	font-weight: 900; 
	color: #fff; 
	text-transform: uppercase; 
	margin-top: 9px; 
	cursor: pointer; 
} 
.form_contacts_left { 
	margin-top: 130px; 
	margin-left: 20px; 
} 
.form_input_contacts::placeholder { 
	font-size: 11px; 
	font-weight: 300px; 
	text-transform: uppercase; 
	color: #b5e5ff; 
} 
.form_input_contacts:hover::placeholder { 
	color: #fff; 
}
<section id="second"> 
		<div class="second_content_center"> 
			<h3 class="form_contacts_heading text-center">Мы всегда на связи и ответим на все интересующие Вас вопросы!</h3> 
			<div class="container"> 
				<div class="row"> 
					<div class="col-lg-5 col-xl-5 col-sm-5">			 
						<div class="form_contacts_left"> 
							<div class="form_contacts_left_phones d-flex"> 
								<div class="form_contacts_left_phones_icon"> 
									<img src="img/phones.png" alt="phones"> 
								</div> 
								<div class="form_contacts_left_phones_text"> 
									<h4>Телефоны</h4> 
									<span>В Болгарии  8 (123) 12-123-123</span><br> 
									<span>В России     8 (495) 12-123-123</span> 
								</div> 
							</div> 
							<div class="form_contacts_left_email d-flex"> 
								<div class="form_contacts_left_email_icon"> 
									<img src="img/email.png" alt="email"> 
								</div> 
								<div class="form_contacts_left_email_text"> 
									<h4>E-MAIL</h4> 
									<span>info@sitename.ru</span> 
								</div> 
							</div> 
							<div class="form_contacts_left_skype d-flex"> 
								<div class="form_contacts_left_skype_icon"> 
									<img src="img/skype.png" alt="skype"> 
								</div> 
								<div class="form_contacts_left_skype_text"> 
									<h4>Skype</h4> 
									<span>skypename</span> 
								</div> 
							</div> 
						</div> 
					</div> 
					<div class="col-lg-5 col-xl-5 col-12 col-sm-6 col-md-6 ml-auto text-center"> 
						<div class="form_contacts"> 
							<h2 class="form_heading_contacts"><span>Есть вопросы</span><br> 
								по переезду в болгарию?</h2> 
								<p class="form_text_contacts">Мы проконсультируем<br> 
								Вас бесплатно!</p> 
							<form action="#"> 
								<input class="form_input_contacts" type="text" placeholder="Имя"><br> 
								<input class="form_input_contacts" type="email" placeholder="E_MAIL"><br> 
								<input class="form_input_contacts" type="tel" placeholder="Телефон"><br> 
								<button class="form_btn_contacts">Заказать консультацию</button> 
							</form> 
						</div> 
					</div> 
				</div> 
			</div> 
		</div> 
	</section>

Answer 1

Возможно так:

.row{margin:auto;} 
#second { 
	background: #f7f7f7; 
	height: 653px; 
	width: 1040px; 
	margin: 0 auto; 
	-webkit-box-shadow: 0px 8px 7px 3px rgba(0,0,0,0.22); 
	-moz-box-shadow: 0px 8px 7px 3px rgba(0,0,0,0.22); 
	box-shadow: 0px 8px 7px 3px rgba(0,0,0,0.22); 
} 
.second_content_center { 
	margin-top: -88px; 
	padding: 1px; 
	background: #fff; 
	height: 650px; 
	position: relative; 
	z-index: 9; 
} 
.form_contacts_left h4 { 
	font-size: 18px; 
	font-weight: 900; 
	text-transform: uppercase; 
	margin-bottom: 5px; 
} 
.form_contacts_left span { 
	font-size: 16px; 
	font-weight: 100; 
} 
.form_contacts_left_email_icon { 
	margin-right: 26px; 
	margin-bottom: 47px; 
} 
.form_contacts_left_phones_icon { 
	margin-right: 33px; 
	margin-bottom: 47px; 
} 
.form_contacts_left_skype_icon { 
	margin-right: 26px; 
} 
.form_contacts { 
	background: #11b2f5; 
	width: 100%; 
	height: 468px; 
	border-radius: 4px; 
	margin-top: 53px; 
	padding: 1px; 
} 
.form_heading_contacts { 
	font-size: 25px; 
	font-weight: 900; 
	text-transform: uppercase; 
	color: #fff; 
	margin-top: 40px; 
	margin-bottom: 15px; 
} 
.form_text_contacts { 
	font-size: 18px; 
	font-weight: 100; 
	text-transform: uppercase; 
	color: #fff; 
	margin-bottom: 20px; 
} 
.form_input_contacts { 
	width: 90%; 
	height: 53px; 
	background: #30c2ff; 
	border: 1px solid #fff; 
	border-radius: 3px; 
	margin-bottom: 7px; 
	padding-left: 35px; 
} 
.form_btn_contacts { 
	width: 90%; 
	height: 55px; 
	background: transparent; 
	border: 2px solid #fff; 
	border-radius: 3px; 
	font-size: 13px; 
	font-weight: 900; 
	color: #fff; 
	text-transform: uppercase; 
	margin-top: 9px; 
	cursor: pointer; 
} 
.form_contacts_left { 
	margin-top: 130px; 
	margin-left: 20px; 
} 
.form_input_contacts::placeholder { 
	font-size: 11px; 
	font-weight: 300px; 
	text-transform: uppercase; 
	color: #b5e5ff; 
} 
.form_input_contacts:hover::placeholder { 
	color: #fff; 
}
<section id="second"> 
		<div class="second_content_center"> 
			<h3 class="form_contacts_heading text-center">Мы всегда на связи и ответим на все интересующие Вас вопросы!</h3> 
			<div class="container"> 
				<div class="row"> 
					<div class="col-lg-5 col-xl-5 col-sm-5">			 
						<div class="form_contacts_left"> 
							<div class="form_contacts_left_phones d-flex"> 
								<div class="form_contacts_left_phones_icon"> 
									<img src="img/phones.png" alt="phones"> 
								</div> 
								<div class="form_contacts_left_phones_text"> 
									<h4>Телефоны</h4> 
									<span>В Болгарии  8 (123) 12-123-123</span><br> 
									<span>В России     8 (495) 12-123-123</span> 
								</div> 
							</div> 
							<div class="form_contacts_left_email d-flex"> 
								<div class="form_contacts_left_email_icon"> 
									<img src="img/email.png" alt="email"> 
								</div> 
								<div class="form_contacts_left_email_text"> 
									<h4>E-MAIL</h4> 
									<span>info@sitename.ru</span> 
								</div> 
							</div> 
							<div class="form_contacts_left_skype d-flex"> 
								<div class="form_contacts_left_skype_icon"> 
									<img src="img/skype.png" alt="skype"> 
								</div> 
								<div class="form_contacts_left_skype_text"> 
									<h4>Skype</h4> 
									<span>skypename</span> 
								</div> 
							</div> 
						</div> 
					</div> 
					<div class="col-lg-5 col-xl-5 col-12 col-sm-6 col-md-6 ml-auto text-center"> 
						<div class="form_contacts"> 
							<h2 class="form_heading_contacts"><span>Есть вопросы</span><br> 
								по переезду в болгарию?</h2> 
								<p class="form_text_contacts">Мы проконсультируем<br> 
								Вас бесплатно!</p> 
							<form action="#"> 
								<input class="form_input_contacts" type="text" placeholder="Имя"><br> 
								<input class="form_input_contacts" type="email" placeholder="E_MAIL"><br> 
								<input class="form_input_contacts" type="tel" placeholder="Телефон"><br> 
								<button class="form_btn_contacts">Заказать консультацию</button> 
							</form> 
						</div> 
					</div> 
				</div> 
			</div> 
		</div> 
	</section>

READ ALSO
Не работает ссылка для скачивания

Не работает ссылка для скачивания

На сайте есть такой код <div class="col-12 col-sm-4"><div class="home-hover navigation-slide" ><img src="images/WPpng" style="width:20%"></div><a href="files/WP

159
Скрытие меню после скролла в адаптивной верстке

Скрытие меню после скролла в адаптивной верстке

В мобильной версии (при малом экране) после нажатия на пункт меню происходит скролл в нужный раздел сайта

150
Не выпадает подменю

Не выпадает подменю

Не выпадает подменю Bootstrap 3

167
Как добавлять пометки на картинку и сохранять их в БД?

Как добавлять пометки на картинку и сохранять их в БД?

Я хочу в книге делать мои пометки и комментарии и писать ответыКниги в pdf формате

270