Не понимаю, откуда отступы? Если убрать свойство background-size: cover то отступов нет, но при больших разрешениях, чем 1600, уже не очень смотрится.
Прилагаю скриншот с проблемой
HTML код (только часть):
<div class="bg">
<header class="header">
<div class="list">
<ol class="header__ol header_ol-1">
<li class="header__element">Home</li>
<li class="header__element">About us</li>
<li class="header__element">blog</li>
</ol>
</div>
<div class="digital">
<img class="rectangle" src="src/img/rectangle-2.png" alt="">
<div class="header__logo">
<h1>digital</h1>
<img class="dote" src="src/img/dote.png" alt="dote">
</div>
<img class="line" src="src/img/line.png" alt="line">
<div class="fontasewome">
<a href="facebook.com">
<i class="fa fa-facebook"></i>
</a>
<a href="plus.google.com">
<i class="fa fa-google-plus"></i>
</a>
<a href="youtube.com">
<i class="fa fa-youtube"></i>
</a>
</div>
</div>
<div class="list-2">
<ol class="header__ol header_ol-2">
<li class="header__element">services</li>
<li class="header__element">pages</li>
<li class="header__element">Contact us</li>
</ol>
</div>
</header>
<div class="banner">
<h2 class="banner__mainwords">This is the future of<br>
web design.</h2>
<p class="banner__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod<br>
temporesse cillum dolore eu fugiat nulla eu fugiat nulla pariatur.</p>
<button class="banner__button button">Read more</button>
</div>
</div>
CSS (тоже часть):
.bg {
background-image: url(../src/img/bg_photo.png);
background-repeat: no-repeat;
background-position: top;
background-size: cover;
}
// Header
.header {
display: flex;
justify-content: space-around;
.list {
width: 18.15%;
}
.list-2 {
width: 20.15%;
}
.header__ol {
display: flex;
}
.header__ol li {
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.24px;
margin: 28px 10% 0 0;
}
.digital {
margin-right: 2%;
.rectangle {
position: absolute;
left: 27%;
width: 40%;
}
.line {
margin-left: 15%;
margin-top: 2%;
width: 124px;
height: 4px;
}
h1 {
color: #ffffff;
font-family: 'Latoheavy', sans-serif;
font-size: 60px;
letter-spacing: -1.39px;
margin-top: 44px;
justify-self: center;
}
.header__logo {
display: flex;
}
.dote {
width: 9%;
height: 2%;
margin-top: 80px;
margin-left: 2%;
}
span {
font-family: 'Latoregular', sans-serif;
font-size: 60px;
letter-spacing: -1.39px;
border-radius: 50%;
width: 14px;
height: 14px;
background-color: #fba419;
}
.fontasewome {
display: flex;
i {
border: 2px solid #ffffff;
border-radius: 50%;
margin-right: 37px;
margin-top: 10%;
}
.fa-facebook {
padding: 10px 13px 10px 13px;
}
.fa-google-plus {
padding: 10px 9px 10px 9px;
}
.fa-youtube {
padding: 11px 11px 11px 11px; }
}
a {
color: white;
}
}
}
.banner {
display: flex;
flex-direction: column;
width: 100%;
height: 43%;
margin: 14% 0 0 0;
justify-content: space-between;
text-align: center;
align-items: center;
.banner__mainwords {
color: #ffffff;
font-family: "LatoBlack", sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: -0.69px;
@include adaptiv-font(109, 16);
}
.banner__paragraph {
font-family: Lato;
font-size: 24px;
font-weight: 300;
line-height: 30px;
letter-spacing: 0.6px;
color: #bfbfbf;
}
}
Простой
