@lilandre2

Почему размер div'a в браузере не равен тому, сколько я задал в стилях?

Добрый день. Занимаюсь версткой сайта. Браузер не хочет отображать блок wrappers в заданных мною размеров. В чем проблема?

html
<!DOCTYPE html>
<html>
	<head>
		<title></title>
    	<meta charset="utf-8">

		<link rel="stylesheet" type="text/css" href="style/style.css">
	</head>

	 <body>
	 <div class="wrappers">
	 	<div class="cover menu">
		 	<div class="container">
		 		<header>
		 			<ul class="my-menu clearfix" >
		 				<li><a href="#">Home</a> </li>
		 				<li><a class="slesh" href="#">-</a> </li>
		 				<li><a href="#">About </a> </li>
		 				<li><a class="slesh" href="#">-</a> </li>
		 				<li><a href="#">Our services </a> </li>
		 				<li><a class="slesh" href="#">-</a> </li>
		 				<li><a href="#">Portfolio </a> </li>
		 				<li><a class="slesh" href="#">-</a> </li>
		 				<li><a href="#">Experience </a> </li>
		 				<li><a class="slesh" href="#">-</a> </li>
		 				<li><a href="#">Blog </a> </li>
		 				<li><a class="slesh" href="#">-</a> </li>
		 				<li><a href="#">Contact </a> </li>
		 			</ul>
		 		</header>
		 	</div>
		 </div>
		<div class="cover first-p">
		 	<div class="container">
				<div class="one-greating">
				<p class="greatings"> </p>
				<p class="my-family"> </p>
				<p class="my-name">   </p>
				<p class="why-im"></p>
				<div class="container-for-button">
					<span class="button-down-cv"> </span>
				</div>
				</div>
			</div>
		</div>
		<div class="container">
		 <div class="about-me">
		 	<div class="my-history">
		 		<p class="my-family-mane"></p>
		 		<p class="my-profession"></p>
		 		<p class="my-history-details"> </p>
		 	</div>
		 	<div class="my-skill">
		 		<div class="skill-design">
		 			<p class="skill-title"></p>
		 			<span class="my-progress-design"> </span>
		 		</div>
		 		<div class="skill-prography">
		 			<p class="skill-title"></p>
		 			<span class="my-progress-prography"> </span>
		 		</div>
		 		<div class="skill-markrting">
		 			<p class="skill-title"></p>
		 			<span class="my-progress-markrting"> </span>
		 		</div>
		 		<div class="skill-brand">
		 			<p class="skill-title"></p>
		 			<span class="my-progress-markrting"> </span>
		 		</div>
		 	</div>
		 </div>
		</div>
		<div class="container">
			<div class="my-contacts-info">
				<div class="my-phone left">
					<span class="my-contact-img left"></span>
					<div class="my-contatact-details right">
						<p class="contact-item-title"></p>
						<p class="contact-item-text"></p>
					</div>
				</div>
				<div class="my-adress left">
					<span class="my-contact-img left"></span>
					<div class="my-contatact-details right">
						<p class="contact-item-title"></p>
						<p class="contact-item-text"></p>
					</div>
				</div>
				<div class="my-email left">
					<span class="my-contact-img left"></span>
					<div class="my-contatact-details right">
						<p class="contact-item-title"></p>
						<p class="contact-item-text"></p>
					</div>
				</div>	
			</div>
		</div>
		<div class="container">
			<div class="about-our-service">
				<p class="services-title"></p>
				<p class="services-description"></p>
				<div class="services-container">
					<div class="services-item-block">
						<img class="" src="">
						<p class="servises-item-title"></p>
						<p class="servises-item-description"></p>
					</div>
				</div>
			</div>
		</div>

		<div class="container">
			<div class="testimional">
				<p class="testimional-title"></p>
				<div class="testimional-contetn clearfix">
					<div class="left blqckquote"></div>
					<div class="testimional-photo-and-name right"> 
						<div class="testimional-photo-and-name-photo clearfix">
							<div class="testim-photo left"></div>
							<div class="testim-nsme-and-family right"></div>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		<div class="container">
			<div class="portpholio">
				<div class="portpholio-menu">
				</div>
				<div class="portpholio-images">
				<img  class="portpholio-item-images" src="">
				</div>
			</div>
		</div>
		<div class="container">
			<div class="expirience">
			<p class="expirience-title"></p>
			<p class="expirience-discription"></p>
				<div class="expirience-items">
					<div class="expirience-item-left">
						<div class="expirience-name"></div>
						<dis class="exporoence-text"></dis>
					</div>
					<div class="expirience-item-right">
						<dis class="exporoence-text"></dis>
						<div class="expirience-name"></div>
					</div>	
				</div>
			</div>
		</div>
		<div class="container">
			<div class="blog">
			<p class="blog-title"></p>
			<div class="blog-items">
				<div classs="blog-item">
					<img  class="blog-img" src="">
					<span class="blog-item-who-i-work"></span>
					<span class="blog-item-title"></span>
					<p class=" blog-item-discription"></p>
				</div>
			</div>
			</div>
		</div>
		<div class="container">
			<div class="contact-with-us">
				<div class="contact-form-body">
					<p class="contact-form-body-title"></p>
					<p class="contact-form-body-description"></p>
					<div class="contact-form-body-skillet">
						<div class="three-form">
						</div>
						<div class=" big-one-contact-form"></div>

					</div>
					<span class="button-for-send"></span>
				</div>
			</div>
		</div>
		<footer>
		<div class="container">
			<div class="copyright">
			</div>
		</div>
		</footer>
	</div>

	</body>

</html>

.wrappers{
	width:1600px;
/*	max-width:100%;*/
	margin:0 auto;
	background-color:red;
}



https://jsfiddle.net/lilandre/zfwnm032/
  • Вопрос задан
  • 243 просмотра
Решения вопроса 1
вообще если хочется адаптивный блок лучше делать наоборот

.wrappers {
  width: 100%;
  max-width: 1600px;
}


+ нет сбрасывающих стилей
body { margin: 0; padding: 0;}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
23 нояб. 2024, в 01:31
1000 руб./за проект
23 нояб. 2024, в 00:16
2000 руб./за проект
22 нояб. 2024, в 23:55
3000 руб./за проект