Protostar smart search's position doesn't translate well to mobile

Question

I have a protostar template that I customize myself from time to time using css.

It looks fine in a web browser and big tablets; although it isn't a major problem, when the window size or being viewed on a small resolution device the search bar itself doesn't stay consistent in it's width compared to everything else.

The search bar itself has loads of hidden margins & padding, and also a 90% width, but I don't know how I can make it stay the same width (as the menu as a reference) or at least have it float in the centre of the resolution when it goes into mobile view.

http://goo.gl/SsHbPo

I don't want my website name to appear in search engines so I linked it this way.

Answer 1

In your CSS file, go to line 7312, where you will see the following code:

.header-search .search-query {
    width: 90%;
}

Replace it all with the following:

.header-search .search-query {
    box-sizing: border-box;
    height: 30px;
    width: 100%;
}