Почему часть фона пропадает при уменьшении расширения?

Question

[WoodyAndBuzz]

Вопрос связан с адаптивной версткой. При более меньших значениях расширения экрана фон становиться меньше и вываливаются атрибуты внутри блока. Подобный вопрос был уже на сайте: qna.habr.com/q/157801. Ответ был установить значение min-height блоку. Но хотелось бы более расширенный ответ по этой теме. Заранее спасибо.

Comments

[Ankhena]

Задайте

*, *::before, *::after {
outline: 2px solid red;
outline-offset: -2px;
}

Посмотрите, кто вывалился.
Разберитесь почему он вывалился (ширина, позиционирование, что-то ещё).
Почините.

Иначе делайте песочницу на jsfiddle.net или прикрепляйте ссылку на сайт.

[WoodyAndBuzz]

HTML

<div class="header">
        <div class="container header-content">
            <div class="header-left">
                <a href="#" class="logo">
                    <img src="image/logo.png" class="logo-img" alt="logo">BRAN<pclass="pink">D</p>
                </a>
                <form action="" class="form">
                        <div class="form-menu">
                            <button class="form-browse"><p>Browse &#x25BE</p></button> 
                            <div class="drop">
                                <div class="drop-flex">
                                    <h3 class="drop-h3">Women</h3>
                                    <ul class="drop-menu">
                                        <li><a href="" class="drop-link">Dresses</a></li>
                                        <li><a href="" class="drop-link">Tops</a></li>
                                        <li><a href="" class="drop-link">Sweaters/Knits</a></li>
                                        <li><a href="" class="drop-link">Jacets/Coats</a></li>
                                        <li><a href="" class="drop-link">Blazers</a></li>
                                        <li><a href="" class="drop-link">Legings/Pants</a></li>
                                        <li><a href="" class="drop-link">Skirts/Shots</a></li>
                                        <li><a href="" class="drop-link">Accessories</a></li>
                                    </ul>
                                </div>
                            </div> 
                        </div>
                        <input type="text" class="word" placeholder="Search for item">
                        <button class="loop"></button>
                </form>
            </div>
            <div class="header-right">
                <img src="image/forma.png" class="cart" alt="forma">
                <div class="button"><a href=""><p>My Account</p></a></div>
            </div>
        </div>
    </div>

CSS

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: 'Lato', sans-serif;
}

.clearfix::after{
    content:"";
    display: table;
    clear: both;
}

.header{
   height: 100px;
    background-color: #FFFFFF;
    border: 1px solid #ececec;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
}

.container{
    max-width: 1140px;
    margin: 0 auto;
}

.header-content{
    width: 1140px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.header-left{
    display: flex;
    align-items: center;
}

.header-left a{
    display: flex;
    align-items: center;
}

.form{
    display: flex;  
    align-items: center;
    margin-left: 37px;
}

.header-right{
   display: flex;
   align-items: center;
}

.logo-img{
    margin-right: 13px;
}


.logo{
    font-weight: 300;
    font-size: 27px;
    text-decoration: none;
    color: #222222;
}

.pink{
    color: #F16D7F;
    font-weight: 700;
}

.cart{
    margin-right: 26px;
    cursor: pointer;
}

.form-browse{
    width: 88px;
    height: 39px;
    background-color: #CDCDCC;
    text-align: center;
    border: 1px solid #CDCDCC;
    position: relative;
    cursor: pointer;
}

.form-browse:hover .drop{
    display: flex;
}

.form-browse p{
    line-height: 36px;
}

.word{
    width: 280px;
    height: 37px;
    border: 1px solid #CDCDCC;
    padding-left: 15px;
}

.loop{
    width: 39px;
    height: 39px;
    background: transparent url(image/loop.png) no-repeat center center;
    border: 1px solid #CDCDCC;
    cursor: pointer;
}

.button{
    width: 131px;
    height: 39px;
    background-color: #F16D7F;
    text-align: center;
    text-decoration: none;
}

.button a{
    text-decoration: none;
}

.header-right p{
    line-height: 36px;
    font-weight: 400;
    color: #FFFFFF;
    font-size: 15px;
}

Это у первого блока с вылезающей кнопкой MyAccount.