Пытаюсь создать хедер, что состоит из нескольких слоев. И между первым и вторым появился этот отступ (скриншот). Что я сделал не так? Каких-то маржинов и падингов там нет.
UPD: Даже если добавить надписи на фоне свойство display: none, ее отсутствие почти не влияет на этот отступ и он остается в любом случае (скриншот 2)
* {
transition: .5s;
outline: none;
}
body {
background-color: #282828;
}
header .row,
header {
min-height: 85vh;
background-color: #191919;
color: #FFFFFF;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
}
.logo .name {
font-family: Oswald;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 100%;
user-select: none;
text-transform: uppercase;
font-feature-settings: 'pnum' on, 'lnum' on;
}
.headings {
display: flex;
align-items: flex-end;
justify-content: center;
margin-top: 40px;
}
.headings .item {
cursor: pointer;
display: flex;
flex-direction: column;
margin: 0 10px;
opacity: 0.3;
}
.headings .active {
opacity: 1;
color: #DB2700;
}
.item:hover {
opacity: 1;
}
.type {
font-family: Oswald;
font-style: normal;
font-weight: bold;
font-size: 13px;
line-height: 100%;
font-feature-settings: 'pnum' on, 'lnum' on;
margin-top: 7px;
}
.bgString {
user-select: none;
margin-top: -45px;
font-family: Oswald;
font-style: normal;
font-weight: 200;
font-size: 230px;
line-height: 100%;
font-feature-settings: 'pnum' on, 'lnum' on;
color: #282828;
transform: rotate(90deg);
}
.bgString .dark {
color: #191919;
}
.mainHeader {
width: 464px;
height: 155px;
}
h1{
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-style: normal;
font-size: 100px;
line-height: 100%;
text-transform: uppercase;
font-feature-settings: 'pnum' on, 'lnum' on;
}
.mainHeader button {
background: #DB2700;
border-radius: 75px;
border: none;
width: 200px;
height: 50px;
outline: none;
font-family: Noto Sans;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 100%;
margin-top: 40px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-feature-settings: 'pnum' on, 'lnum' on;
color: #FFFFFF;
}
.mainHeader button:hover {
background: #ff2f00;
}
.social .item {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;400;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png">
<meta name="theme-color" content="#070d0f">
<link rel="stylesheet" href="styles/main.css">
<title>Savelev</title>
</head>
<body>
<header>
<div class="container">
<div class="row align-items-start">
<div class="col-lg-1"></div>
<div class="col-lg-2 logo">
<img src="/images/header/logoIone 3.svg" alt="Logo">
<span class="name">SAVELEV</span>
</div>
<div class="col-lg-1"></div>
<div class="col-lg-4 headings">
<div class="item sneakers active">
<img src="/images/header/Sneakers.svg" alt="Sneakers">
<span class="type">Sneakers</span>
</div>
<div class="item cloathes">
<img src="/images/header/Cloathes.svg" alt="Cloathes">
<span class="type">Cloathes</span>
</div>
<div class="item accessories">
<img src="/images/header/Accessories.svg" alt="Accessories">
<span class="type">Accessories</span>
</div>
<div class="item other">
<img src="/images/header/Other.svg" alt="Other">
<span class="type">Other</span>
</div>
</div>
<div class="col-lg-2"></div>
<div class="col-lg-2">
<div class="bgString">OCTOPU<span class="dark">S</span></div>
</div>
<div class="col-lg-1"></div>
<div class="col-lg-4">
<div class="mainHeader">
<h1>VISUALIZE YOUR ITEM</h1>
<button type="button" class="contactBtn">Contact me</button>
</div>
</div>
<div class="col-lg-1"></div>
<div class="col-lg-5"></div>
<div class="col-lg-1"></div>
<div class="col-lg-1"></div>
<div class="col-lg-2">
<div class="social">
<img class="item" src="/images/header/social_behance.svg" alt="Behance">
<img class="item" src="/images/header/social_instagram.svg" alt="Instagram">
<img class="item" src="/images/header/social_youtube.svg" alt="YouTube">
</div>
</div>
</div>
</div>
</header>
<!--
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
-->
</body>
</html>