@media и абсолютное позиционирование кнопки

Не могу подогнать кнопку в нужное место при определенном разрешении монитора, имеется такой код формы поиска, HTML:

<div class="search-box">
                    <form id="quicksearch" method="post">
                        <input type="hidden" name="do" value="search" />
                        <input type="hidden" name="subaction" value="search" />
                        <div class="search-field">
                            <input id="story" name="story" placeholder="Поиск..." type="text" />
<button type="submit" class="btn-login" style="border:0px; padding: 0px; top: 0px; left: 230px;"><span class="fa fa-search"></span></button> 
                        </div>
                    </form>
                               </div>введите сюда код

CSS:

.search-box {width:280px;}
.search-field {width:100%; position:relative;}
.search-field input, .search-field input:focus {width:100%; padding:0 100px 0 10px; border-radius:23px; 
background-color:#fff; color:#333; height:40px; line-height:40px; box-shadow:inset 0 0 0 1px #e3e3e3;}
.search-box button {position: absolute;}

получается все хорошо, как на картинке ниже:

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

@media screen and (max-width: 470px) {
.search-box {width:180px;}
}

то поле ввода уменьшается, а кнопка остается на месте и выходит за пределы видимости экрана:

я пытался добавить в @media

1) .search-box button{top: 0px;left: 130px;}
2) .search-box btn-login{top:0px;left: 130px;}
3) .btn-login search-box {top: 0px;left: 130px;}
4) .button search-box {top: 0px;left: 130px;}

ничего не получилось, кнопка не сдвигилась с места и оставалась за зоной видимости, подскажите, что нужно прописать в медиа запрос чтоб кнопка переместилась на нужную позицию?