Не могу понять почему 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;
}
Средний
