0

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

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

2
  • Это появляется только тогда, когда вы открываете инструменты разработчика? Это же нормальное явление, а если хотите убрать, то напишите свойство overflow: hidden; элементу body 29 апр 2022 в 18:36
  • Когда начинается появляться скролл? Я вижу только на < 493px, но там логично, элементы шире вьюпорта.
    – De.Minov
    30 апр 2022 в 5:04

1 ответ 1

0

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

4
  • Напишите, пожалуйста, текстом что сделали :)
    – gil9red
    1 мая 2022 в 12:36
  • @gil9red обернул флекс и выставил блоки в строку
    – Arcadiy
    1 мая 2022 в 12:39
  • @gil9red здесь .header .nav
    – Arcadiy
    1 мая 2022 в 12:40
  • Это лучше в самом вопросе писать :)
    – gil9red
    1 мая 2022 в 13:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.