Проблема с позиционированием блоков?

Question

[cs_gamers2014]

Добрый день, уважаемые хабровчане, есть вопрос по позиционированию блоков: есть наброска сайта, при сжатии окна происходят проблемы с кнопками и позиционированием блока по центру над фоном под меню. Указывал в процентах, но что-то не хочет меняться положение. Заранее спасибо за любую помощь.

Comments

[Александр]

А где пример?

[Дмитрий]

Чёрт, забыл свой магический шар дома.
Так бы помог, сорри.

[Александр]

Михаэль Вышнеградский, Даже сейчас, не особо пойму что надо получить на выходе. Чтоб ссылки в меню на новую строку перескакивали чтоль.

[cs_gamers2014]

Михаэль Вейк, извиняюсь за качество кода=))Только обучаюсь, я залил скрины, примерно такого уровня, при сжатии блок съезжает и кнопки с формой тоже

[cs_gamers2014]

Александр, дополнил

[Александр]

cs_gamers2014,

.map {
    flex-wrap: wrap;
}

[cs_gamers2014]

Спасибо, не могу понять как сделать так, чтобы изменялся фон относительно окна браузера, в результате выходит такая ересь, белые полосы по бокам:

<section class="bk-img">
    <div class="container">
    <h1>Develop a passion for <br>learning new things</h1>
    <p>Was certainly remaining engrossed applauded sir how discovery. Settled opinion <br> how enjoyed greater joy adapted too shy. Now properly surprise expenses</p>
     <section>
    <form>
    <input type="text" class="search" placeholder="Search courses">
    <button type="submit" class="btn">
        <i class="fas fa-search"></i>
    </button>
    </form>
    </section>
    </div>
</section>

.bk-img{
    height: 100%;
    background: url(images/slide_1.jpg) no-repeat ;
    background-position: cover;
    margin-top: -5%;
}
.bk-img:after{
    background: #000 no-repeat scroll 0 0;
    content: "";
    height: 100%;    
    opacity: 0.7;
    position: absolute;
    width: 100%;
}
.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    z-index: 1;
    
}
.bk-img{
    display: flex;
    justify-content: center;
    align-items: center;
}
В МЕДИА для max-width: 1366px переопределил:
    .bk-img{
        height: 100%;
        width: 100%;
        position: relative;
        top:-10%;
        background-position: top;
    }

[cs_gamers2014]

Александр, откровенно говоря, эту проблему уже долго не могу решить(
На телефоне вообще выйдет следующее, что не на руку