Появляется горизонтальная прокрутка при просмотре через инструменты разработчика((

Question

Проблема не уходит, даже если боди оставить пустым((

* {
  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>

Answer 1

* {
  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;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.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>

Answer 2

При зажатии Shift можно эмулировать приближение, как на сенсорных устройствах. Так что остаётся только отдалить вид, если проблема при активной "... панели инструментов устройства".

БЛОГ НА HUSL

Появляется горизонтальная прокрутка при просмотре через инструменты разработчика((

Ответы (2 шт):