Проблема не уходит, даже если боди оставить пустым((
* {
font-family: "Manrope", sans-serif;
box-sizing: border-box;
padding: 0;
margin: 0;
color: #000000;
}
a {
display: inline-block;
text-decoration: none;
}
ul li {
list-style: none;
}
input,
button,
textarea {
font-family: inherit;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: 400;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
@mixin main__button() {
background: #f57059;
border-radius: 10px;
padding: 17px 35px;
}
.button__link {
@include main__button();
color: #ffffff;
}
.button__link:hover {
box-shadow: 0 0 20px #f57059;
}
.header {
padding-top: 30px;
padding-bottom: 120px;
position: relative;
}
.header .figure {
position: absolute;
z-index: -1;
margin-top: -68px;
margin-left: -141px;
max-width: 900px;
max-height: 820px;
}
.header .nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.header .nav__logo {
font-family: "Gilroy", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 25px;
text-transform: uppercase;
}
.header .nav__list {
display: flex;
gap: 40px;
align-items: center;
}
.header .nav__button {
display: flex;
gap: 50px;
align-items: center;
}
.header .nav__item,
.header .nav__button,
.header .nav .dropdown-content {
font-family: "Manrope";
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
}
.header .nav__after {
position: relative;
}
.header .nav__after::after,
.header .nav__after::before {
content: "";
position: absolute;
width: 0;
height: 0;
}
.header .nav__after::after {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #000000;
right: -20px;
bottom: 6px;
z-index: 1;
}
.header .nav__after::before {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #ffebcd;
right: -18px;
bottom: 9px;
z-index: 2;
}
.header .nav .dropbtn {
background-color: inherit;
border: none;
cursor: pointer;
}
.header .nav .dropdown {
position: relative;
display: inline-block;
}
.header .nav .dropdown-content {
display: none;
position: absolute;
width: 100%;
min-width: 100px;
z-index: 1;
}
.header .nav .dropdown-content a {
padding: 10px 0 0;
text-decoration: none;
display: block;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
border-radius: 5%;
}
.header .nav .dropdown-content a:hover {
background-color: #f1f1f1;
text-shadow: 0 0 20px #000000;
}
.header .nav .dropdown:hover .dropdown-content {
display: block;
}
<body>
<header class="header">
<div class="container">
<picture class="figure">
<source srcset="images/first__block/first__block__bg.png" media="screen and (max-width: 1200px)">
<img src="images/first__block/first__block__bg.png" alt="figure">
</picture>
<nav class="nav">
<span class="nav__logo">AR Shakir</span>
<div class="nav__list">
<div class="dropdown">
<button class="nav__item nav__after dropbtn">Product</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown">
<button class="nav__item nav__after dropbtn">Template</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#" class="nav__item">Blog</a>
<a href="#" class="nav__item">Pricing</a>
</div>
<ul class="nav__button">
<li>
<a href="#" class="button__sign">Sign In</a>
</li>
<li>
<a href="#" class="button__link">Start Free</a>
</li>
</ul>
</nav>
</div>
</header>
</body>
< 493px
, но там логично, элементы шире вьюпорта.