В мобильной версии сайта есть отступ фона от header. Не могу понять из-за чего?

В мобильной версии сайта появляется какой-то просвет между фоном и header. Фон указан в самом теге header, в целом верстка через одно место, но нужна нормальная картинка. Подскажите как исправить? https://ibb.co/8NXKz0z - ПК. версия https://ibb.co/C6ZnHkZ - телефон

header {
  width: auto;
  min-height: 100px;
  height: 900px;
  max-width: 100%;
  margin: 0 auto 0 auto;
  background-image: url(../nike1.jpg);
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.header {
  width: auto;
  height: 100px;
  max-width: 100%;
  margin: 0 auto 0 auto;
}

.background-header {
  height: auto;
  width: 100%;
  background-color:rgba(0, 0, 0, 1);
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap-reverse;
  flex-shrink: 1;
  flex-grow: 1;
  position: fixed;
  top: 0;
  z-index: 100;
}
<header>
    <div class="background-header background-header-anim">
        <div class="header-logo-desktop">
            <a href="https://tiedye-samara.ru"><img alt="Логотип Тай-Дай Самара" class="logo"
                                                    src="images/icons/logo.png"></a>
        </div>
        <nav>
            <ul class="top-menu">
                <li><a href="#catalog">Каталог</a></li>
                <li><a href="#services">Как заказать</a></li>
                <li><a href="#contact">Контакты</a></li>
            </ul>
            <ul class="inner-menu up-menu">
                <li class="dropdown"><a href="nike.html" class="dropdown grey-text">Nike</a></li>
                <li><a class="grey-text" href="newbalance.html">New Balance</a></li>
                <li class="dropdown"><a href="adidas.html" class="dropdown grey-text">Adidas</a></li>
                <li><a class="grey-text" href="#winter">Зимние модели<img class="span-img-nav"
                                                                          src="images/icons/new.png" alt=""></a></li>
            </ul>
        </nav>
        <div class="socials">
            <div class="header-logo-mobile">
                <a href="https://tiedye-samara.ru"><img alt="Логотип Тай-Дай Самара" class="logo"
                                                        src="images/icons/logo.png"></a>
            </div>
            <div>
            <span>
              <a href="https://t.me/mackrodionov">
                <img alt="Иконка telegram" class="icon" src="images/icons/Telegram_white.svg">
              </a>
            </span>
                <span>
              <a href="https://api.whatsapp.com/send/?phone=79853300349">
                <img alt="Иконка whats app" class="icon" src="images/icons/WhatsApp_white.svg">
              </a>
            </span>
                <span>
              <a href="https://vk.com/bednystudent">
                <img alt="Иконка vk" class="icon" src="images/icons/VK_white.svg">
              </a>
            </span>
            </div>
            <div class="number">
                <a href=”tel:+79853300349”>+7(985)330-03-49</a>
            </div>
        </div>
    </div>
    <div class="animated-title">
        <div class="text-top">
            <div>
                <h1> Интернет-магазин кроссовок в Самаре </h1>
                <br>
                <h1> Купи пару кроссовок <br> в магазине <span class="red-text"> Summer Sneakers </span></h1>
            </div>
        </div>
        <div class="text-bottom">
            <div>И получи скидку <span class="red-text">20%</span> на вторую пару!</div>
        </div>
    </div>
</header>


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

Автор решения: BlackStar1991

Уберите у header {min-height: 100px;} можете через @media (max-width:450px){} это сделать.

→ Ссылка