Почему блок section создаётся в секции header?

Не могу понять почему Section создаётся в блоке где находится меню первый раз такое вижу

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<body>
<header class="site-header">
	<div class="container">
		<div class="d33">
		</div>
	</div>

	<nav class="site-nav">
		<div class="container">
			<ul>
				<li><a href="">Portfolio</a></li>
				<li><a href="">Services</a></li>
				<li><a href="">Staff</a></li>
				<li><a href="">Articles</a></li>
				<li><a href="">Contact</a></li>
			</ul>
		</div>
	</nav>
</header>
<section class="stn-servises">
	<h2 class="container">
		<div class="row">
			<div class="col-md-6 col-lg-3">fdfdf</div>
			<div class="col-md-6 col-lg-3"></div>
			<div class="col-md-6 col-lg-3"></div>
			<div class="col-md-6 col-lg-3"></div>
		</div>
	</h2>
</section>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="js/bootstrap.js"></script>
</body>
</html>

* {
  margin: 0;
  padding: 0;
}

body
{
	background: #ebebeb;
}

header
{
	height: 135px;
}

.site-header
{
	height: 65px;
	background: #373737;
}


.site-nav
{
	height: 65px;
	background: #474747;
}
.d33 {
width: 80px; height: 65px; 
background: #f26c4f;
position: relative;
}
.d33:before {
content: "";
width: 0; 
height: 0;
position: absolute; left: 100%; 
top: calc(50% - 12px);
border-top: 12px solid transparent;
border-left: 14px solid #f26c4f;
border-bottom: 12px solid transparent;}


ul
  {
	  margin: 0;
	  padding: 0;
	  display:flex;
  }
  ul li
  {
	list-style: none;
    position: relative;
    padding: 0 25px 0 20px;
  }
  
li:after {
  content: '';
  position: absolute;
  width: 1px;
  height: 10px;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
	background: #767676;
}

li:last-child:after {
  display: none;
}

  ul li a
  {
    display: block;
    font-size: 12px;
    font-family: arial;
    text-decoration: none;
    font-weight: 400;
    color: #fff;
	box-sizing: border-box;
	  line-height: 65px;
	  height: 65px;
    
  }

 a:hover {
  border-bottom: 3px solid #f26c4f;
  box-sizing: border-box;
	 text-decoration: none;
	 color: #fff;
}
  • Вопрос задан
  • 306 просмотров
Решения вопроса 1
@m1roku
Начинающий
Ты задаешь тегу header высоту в 135px, а потом переопределяешь ее тому же элементу через селектор класса .site-header до 65px, вот и случается коллапс.
https://jsfiddle.net/p999yde8/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы