Ломается шапка на маленьких экранах

Я сделал на странице кнопку меню, появляющуюся при определенных размерах экрана (с помощью bootstrap), она появляется, как и должна, но при размере экрана в <576px кнопка уезжает под поле поиска, сжимаясь до 1 пикселя (почему-то). Пытался лечить добавляя 2 контейнера (лого и кнопки) в один родительский, но тогда при больших размерах поле поиска назад в центр не возвращается, оставаясь внизу. Что делать-то? Может есть какие полезные свойства объектов?

                <header class="main-head">
                    <div class="container">
                        <div class="row">

                            <div class="col-lg-2 col-md-2 col-sm-6 col-xs-10">
                                <a href="#" class="logo"><img src="img/Logo.svg" alt="Bilb"></a>
                            </div>

                            <div class="col-md-2 col-md-push-8 col-sm-6 col-sm-push-8 col-xs-2 registration">
                                <div class="hidden-xs hidden-sm">   
                                    <div>
                                        <h1>
                                            <a href="#">
                                                Войти
                                            </a>
                                        </h1>
                                    </div>
                                    <a href="#"><h2>Регистрация</h2></a>
                                </div>
                                <div class="hidden-lg hidden-md">
                                    <a href="#" class="toggle-mnu"><span></span></a>
                                </div>
                            </div>

                            <div class="col-lg-8 col-md-7 col-md-pull-2 col-sm-12 col-sm-pull-1 col-12 search">
                                <form>
                                    <p>
                                        <input type="search" class="search_pole" placeholder="Поиск по сайту"> 
                                        <button type="submit" class="fas fa-search search_btn"></button>
                                    </p>
                                </form>
                            </div>

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

Так получается

Так должно быть


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

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

"А ларчик просто открывался". Проблема заключалась в классе bootstrap "row", из-за которого все элементы блока были в строку. Вслед за поиском сносило и кнопку, что было исправлено с удалением этого класса

→ Ссылка