How not to stretch the picture?

Question

css

Why the skin of the menu is closed, then the picture is normal



But when I open it, then the picture is stretched



Burger took from the bootstrap
And I connected the picture like this

<header>
    <nav class="navbar navbar-expand-lg navbar-light">
        <img src="images/logo.png" class="navbar-brand">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto mr-auto">
            <li class="nav-item">
              <a class="nav-link text-white" href="#">Главная</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-white" href="#">Курсы</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-white" href="#">Расписание</a>
              </li>
              <li class="nav-item">
                <a class="nav-link text-white" href="#">Преподаватели</a>
              </li>
              <li class="nav-item">
                <a class="nav-link text-white" href="#">Рассылка</a>
              </li>
              <li class="nav-item">
                <a class="nav-link text-white" href="#">Контакты</a>
              </li>
          </ul>

          <form class="form-inline my-2 my-lg-0">
                <button class="violet_btn">Зайти в кабинет</button>
        </form>
        </div>
      </nav>

     
        <div class="container-fluid">
            <div class="count_div">
                <div class="row">
                    <h1 class="h1_64">Первый курс по компьютерной сборке</h1>
                    <div class="col-12 col-md-8 flex_count mb-3">
                        <div class="black_count">
                            <div class="row_num">18</div>
                            <div class="row_time">Дней</div>
                        </div>

                        <div class="black_count bl_c">
                            <div class="row_num">18</div>
                            <div class="row_time">Часов</div>
                        </div>     

                        <div class="black_count bl_c">
                            <div class="row_num">18</div>
                            <div class="row_time">Минут</div>
                        </div>

                        <div class="black_count bl_c">
                            <div class="row_num">18</div>
                            <div class="row_time">Секунд</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </header>

header{
    background-image: url(../images/main-screen__bgc.png) !important;
    background-size: 100% 100% !important;
    height: auto !important;
    width:100% !important;
}

Answer 1

Why is the skin of the menu closed then the picture is normal

Because the menu is in the block on which there is a background. You can try this, but the situation will not change much:background-size: cover;

Answer 2

So it is - better make a background for the right block, and in the left block (menu) just a black background