-1

*{
	padding: 0;
	margin: 0;
	font-size: 1em;
}
.container{
	width: 90%;
	margin:0 auto;
}
h1,h2,h3,h4,h5,h6{

}
.section1{
	position: relative;
	width: 100%;
	height: 500px;
	background: #f5f2f2;
}
nav{
	display: flex;
	justify-content: center;
	margin-top: 20px;
	height: 60px;
	background: black;
		border-radius: 10px;
}
nav div{
	display: flex;
	justify-content: center;
	width: 10%;
	margin: 5px;
	color: white;
	align-items: center;
	text-transform: uppercase;
	font-size: 1.7vw;

}

.wrap1{
	position: relative;
	display: flex;
	height: 300px;
	margin-top: 50px;
}
.wrap1 .text{
	width: 60%;
}
h1{
	text-transform: uppercase;
	font-size: 3em;
}
.wrap1 p{
	width: 70%;
	margin-top: 10px;
	color: #777676;
}
.main_but{
	position: absolute;
	bottom: 0px;
	display: block;
	width: 30%;
	height: 40px;
	background: red;
	border: 1px solid red;
	color: white;
	border-radius: 5px;
	font-weight: 700;
}
.wrap1 .video{
	width: 40%;
}
/*header end*/

.section2{
	position: relative;
	width: 100%;
	height: 600px;
}
<!DOCTYPE html>
<html>
<head>
	<title>123</title>
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<section class="section1">
	<div class="container">
	<nav>
		<div>Home</div>
		<div>Portfolio</div>
		<div>About Us</div>
		<div>Contacts</div>
	</nav>
	<div class="wrap1">
		<div class="text">
			<h1>Our Stronh Organisation</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
			<button class="main_but">Contact Us</button>
		</div>
		<div class="video"><iframe width="340" height="290" src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
	</div>
</section>
<!-- HEADER END -->
<div class="section2">
	<div class="container">
		<div class="text">Learn more</div>
		<div class="col1">1</div>
		<div class="col2">123</div>
	</div>

</div>

1
  • происходит схлопывание margin
    – E_K
    7 сен 2018 в 16:51

1 ответ 1

1

Могу посоветовать два варианта

  1. Можно у nav убрать margin-top: 20px а для .section1 задать padding-top: 20px
  2. Задать для .section1 свойство overflow: hidden;
1
  • Спасибо большое, воспользовался 2 методом, был бы благодарен если бы объяснили как работает 8 сен 2018 в 6:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.