Смещается текст при масштабировании

443
14 ноября 2017, 23:57

Добрый день. При масштабировании страницы столкнулся со следующей проблемой: -смещается текст описания. Пожалуйста, помогите решить проблему :)

<?php   
	include $_SERVER['DOCUMENT_ROOT'].'/header.php'; 
?> 
<!-- <Стили>--> 
<!-- <Стили>--> 
<!-- <Стили>--> 
<style> 
p { 
	font-size: 36px; 
	font-family: Impact; 
	font-weight: 400; 
	margin: 0 auto; 
	padding-top: 30px; 
	padding-right: 10px; 
	text-decoration: underline; 
	text-align: center; 
} 
.description { 
	font-size: 16px; 
	font-family: Courier New, sans-serif; 
	font-style: normal; 
	margin: 0 auto; 
	text-align: justify; 
	position: relative; 
	left: 30%; 
} 
</style> 
<!-- </// Конец стилей>--> 
<!-- </// Конец стилей>--> 
<!-- </// Конец стилей>--> 
<section> 
		<div class="container1"> 
			<p> 
				О нас: 
			</p> 
			<span class="description"> 
				Описание деятельности швейной мастерской 
			</span>	 
		</div> 
 
</section> 
<?php   
	include $_SERVER['DOCUMENT_ROOT'].'/objects/footer.php'; 
?>

/*This is CSS RESET*/ 
/* http://meyerweb.com/eric/tools/css/reset/  
   v2.0 | 20110126 
   License: none (public domain) 
*/ 
 
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed,  
figure, figcaption, footer, header, hgroup,  
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
	margin: 0; 
	padding: 0; 
	border: 0; 
	font-size: 100%; 
	font: inherit; 
	vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure,  
footer, header, hgroup, menu, nav, section { 
	display: block; 
} 
body { 
	line-height: 1; 
} 
ol, ul { 
	list-style: none; 
} 
blockquote, q { 
	quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
	content: ''; 
	content: none; 
} 
table { 
	border-collapse: collapse; 
	border-spacing: 0; 
} 
/*This is the END of CSS RESET*/ 
/*This is the END of CSS RESET*/ 
/*This is the END of CSS RESET*/ 
 
body, html { 
	background-color: #B63D32; 
	margin: 0 auto; 
	padding: 0; 
	position: relative; 
} 
div { 
	box-sizing: border-box; 
} 
#page-wrapper { 
	width: 100%; 
	font: 100%/1.4em,Helvetica,Arial,sans-serif; 
    margin: 0; 
    padding: 0; 
 } 
header{ 
	width: 96.1%; 
	min-height: 202px; 
	/*border*/ 
	border-top: 22px solid #000; 
	border-bottom: 13px solid #000; 
	border-left: 22px solid #000; 
	border-right: 22px solid #000; 
	margin: 0 auto; 
	/*border ends*/ 
} 
.container { 
	max-width: 898px; 
	margin: 0 auto; 
} 
.logo { 
	width: 85px; 
	height: 86px; 
	margin: 0 auto; 
	padding-top: 2px; 
	padding-right: 10.8%; 
} 
.title__first { 
	margin-top: 6px; 
	margin-left: 0px; 
	padding-right: 10px; 
	font-size: 36px; 
	font-family: Impact, sans-serif; 
	color: #fff; 
	text-shadow: 0px 4px rgba(0, 0, 0, .34); 
	text-align: center; 
} 
.img2 { 
	width: 300px; 
	height: px; 
} 
h1 { 
	font-size: 17px; 
	font-family: Lobster, sans-serif; 
	letter-spacing: 1px;  
	font-weight: normal; 
	color: #fff; 
	text-align: center; 
	margin-top: 3px; 
	padding-right: 13px; 
} 
.title__second { 
	font-size: 18px; 
	color: #000000; 
	font-family: Impact, sans-serif; 
	text-shadow: 1px 0.5px 3px rgba(255,255,255,0.6); 
	background-color: #666666; 
    -webkit-background-clip: text; 
    -moz-background-clip: text; 
    background-clip: text; 
	letter-spacing: -0.55px; 
	text-align: center; 
	margin-top: 2px; 
	margin-left: 0px; 
	padding-right: 3px; 
} 
.main__menu { 
	height: 15px; 
	float: none; 
	margin-top: 1.5%; 
} 
.main__menu ul li > a:hover { 
	color: black; 
	transition: 0.2s; 
} 
.menu { 
	padding: 0; 
	margin: 0; 
	display: block; 
} 
ul { 
	padding-top: 11px; 
} 
.menu li { 
	float: left; 
	display: block; 
	margin: 0 auto; 
	width: 33%; 
	text-align: center; 
} 
.menu li a { 
	color: #fff; 
	text-decoration: none; 
	font-size: 19px; 
	font-family: Courier, sans-serif; 
	font-weight: bolder; 
} 
section { 
	width: 96.1%; 
	max-width: 1000px; 
	height: 640px; 
	/*border*/ 
	border-bottom: 13px solid #000; 
	border-left: 22px solid #000; 
	border-right: 22px solid #000; 
	margin: 0 auto; 
	margin-top: -16px; 
 
	/*border ends*/  
} 
.container1 { 
	height: 640px; 
	margin-left: 0px; 
	margin-top: 16px; 
	margin-right: 0px; 
	background-color: #BFBFBF; 
	background-image: url(../img/fon.png); 
	-webkit-background-size: cover; /* Для хрома */ 
	-moz-background-size: cover;  /* Для лисы*/ 
	-o-background-size: cover;  /* Для оперы*/ 
	-ms-background-size: cover;  /* Для ИЭ*/ 
	background-size: cover;  /* Для закрипления*/ 
	background-position: 19%; 
	background-repeat: no-repeat; 
} 
.spisok { 
	height: 640px;  
	width: 238px; 
	background-color: #7B2019; 
	position: relative; 
	top: -100%; 
	/*border*/ 
	border-bottom: 0px solid #000; 
	border-left: 0px solid #000; 
	border-right: 15px solid #000; 
	/*border ends*/  
}  
.spisok li { 
	width: 195px; 
	height: 45px; 
	display: block; 
	 
	margin-right: 10px; 
	margin-left: 13.2px; 
	background-image: url(../img/span_menu.png); 
	color: rgba(222,222,222 .1);	 
	background-size: cover; 
	-webkit-transition: All 0.3s ease-in-out; 
	-moz-transition: All 0.3s ease-in-out; 
	-o-transition: All 0.3s ease-in-out; 
	-ms-transition: All 0.3s ease-in-out; 
	transition: All 0.3s ease-in-out; 
 
} 
#oblacheniya { 
	margin-top: 16px; 
} 
 
.spisok li a { 
	width: 100%; 
	height: 100%; 
	text-decoration: none; 
	font-family: CyrillicOldBold, sans-serif; 
	letter-spacing: -0.9px; 
	color: white; 
	text-decoration: none; 
	font-size: 17px; 
	font-weight: normal; 
	position: relative; 
	display: list-item; 
    text-align: -webkit-match-parent; 
    text-align: center; 
    padding-left: 9px; 
     
} 
.spisok ul 	> li:hover{ 
	background-image: url(../img/span_menu_hover.png); 
	background-repeat: no-repeat; 
	background-size: cover; 
	-webkit-transition: All 0.3s ease-in-out; 
	-moz-transition: All 0.3s ease-in-out; 
	-o-transition: All 0.3s ease-in-out; 
	-ms-transition: All 0.3s ease-in-out; 
	transition: All 0.3s ease-in-out; 
} 
.spisok ul li > a:hover{ 
	text-shadow: gold 0 0 40px; /* Свечение голубого цвета */ 
    color: white; 
 
} 
 
.spisok ul li a p { 
	padding-top: 14px; 
	margin-top: 5px; 
} 
 
#ugol { 
	background-image: url(../img/span_menu_black.png); 
} 
 
 
.text-div { 
	width: 158px; 
	height: 30px; 
	text-align: center; 
	margin-left: -9px; 
 
} 
.Nashi_Tseny { 
	 /* Абсолютное позиционирование */ 
	float: none; 
	margin: 0 auto; 
   	width: 100%; /* Ширина слоя в процентах */ 
    height: 100%; /* Высота слоя в процентах */ 
    position: relative; 
    top: 4%; 
    left: -0.5%; 
} 
.text_1 { 
	width: 600px; 
	height: 400px; 
	font-size: 16px; 
	line-height: 25px; 
	font-family: Courier New, sans-serif; 
	font-style: normal; 
	margin: 0 auto; 
	position: relative; 
	left: 8%; 
	top: 1%; 
} 
h2 { 
	font-size: 35px; 
	font-family: Impact; 
	font-weight: 400; 
	margin: 0 auto; 
	padding-top: 5px; 
	text-decoration: underline; 
	text-align: center; 
} 
strong { 
	font-weight: bolder; 
	font-size: 16px; 
} 
#vocem_tis { 
	font-style: italic; 
	font-weight: 900; 
	font-family: Lobster, sans-serif; 
	font-size: 15px; 
} 
 
footer { 
	width: 96.1%; 
	height: 115px; 
	/*border*/ 
	border-bottom: 15px solid #000; 
	border-left: 22px solid #000; 
	border-right: 22px solid #000; 
	margin: 0 auto; 
	/*border ends*/ 
}

Answer 1

Это происходит из за left: 30%; в стиле description

Измените стиль что бы он стал таким

.description {
    font-size: 16px;
    font-family: Courier New, sans-serif;
    font-style: normal;
    margin: 0 auto;
    text-align: justify;
    position: relative;
    text-align: center;
}

а в блоке описания смените span на div

<div class="description">
                Описание деятельности швейной мастерской
</div>
READ ALSO
Не отрабатывает slick js

Не отрабатывает slick js

Slick Slider некорректно отрабатывает в том случае, когда слайдер при загрузке страницы сразу скрываетсяПример:

483
Таймер обратного отсчета. Js &amp; Html

Таймер обратного отсчета. Js & Html

Есть кнопкаПри нажатии по ней запускается обратный таймер

346
Парсинг элементов через DomCrawler

Парсинг элементов через DomCrawler

На странице имеется несколько элементов с таким набором классовМне необходимо распарсить все и из каждого элемента вытянуть ссылку

312