У div появляется ненужный margin

Справа от логотипа находится кнопка для развертывания меню справа в мобильной версии. В десктопной версии она скрыта и появляется в мобильной. Вопрос в том, что из-за появляющегося из ниоткуда margin кнопка не умещается рядом с логотипом. Если не указывать ширину - margin не появляется. Но тогда ширина сама вымещает кнопку. Появляющийся margin заменяет ширину уменьшаемого мной div. Схлопывание margin не мой случай. Если убрать верхний, который опускает логотип на середину, то ничего не меняется.

    <header class="header navbar navbar-expand-md">
    <div class="container h-100">
        <div class="row h-100 w-1200">
            <div class="col-md-1">
                <div class="logo">
                    <a class="logo-header" href="<?php bloginfo("url"); ?>">
            <img src="<?php bloginfo("template_url"); ?>/img/logo.png" width="359" height="76" alt="PokerDom">
          </a>
                </div>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fa fa-bars" aria-hidden="true"></i>
        </button>
            </div>
            <div class="col-md-8">
                <div class="main-nav">
          <?php
            if ( has_nav_menu( 'header' ) ) {
              wp_nav_menu ( [
              'theme_location' => 'header',
              'container' => 'nav',
              'container_class' => 'cascad-menu collapse navbar-collapse',
              'container_id' => 'main-nav',
              'menu_class' => 'cascad-menu cascad-menu__inner',
              'menu_id' => 'menu-main-menu',
              'items_wrap' => '<ul class="%2$s">%3$s</ul>',
              'depth' => 1,
              ] );
            }
          ?>
        </div>
            </div>
            <div class="col logobutton">
                <button type="button" class="btn btn-danger button-header">
          <a href="#">Кнопка</a>
        </button>
            </div>
        </div>
    </div>
</header>

.logo {
    height: 100%;
    margin-top: 12px;
}
.logo-header {
    align-items: center;
        width: 192px;
        height: 60px;
    text-align: center;
}
.logo-header img {
    width: 192px;
    height: 48px;
}
media screen and (max-width: 976px) {
.logo {
    margin-top: 0px;
    width:192px;
}
.logo {
    background-color: transparent;
}