Cant find what is adding width to a form element

I have a search box that expands upon hover; which relie son the input field being completely hidden initially; however I can't seem to find what is causing this width;

here is my code; and the live version is : http://stylrs.com/ctf/

.search_header {
        float: right;
    clear: both;
    height: 30px;

}
.search_header input {
    -moz-transition: width 0.5s;
    -ms-transition: width 0.5s;
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
    width: 0;  
    margin: 0 !important;
}

.search_header input:focus,
.search_header:hover input {
    width: 135px;
}

.fa-input {
  background-color: none !important;
  color: white;
  float: right;
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  margin-top: 1px;
  width: 15px !important;
  border: none !important;
  padding: 0;
  margin: 0;
  
}

.search_header input[type="text"] {
  margin-right: 0;
  font-size: 12px;
}

.search_header input[type="submit"] {
  appearance: value;
  background: none !important;
  webkit-appearance: none !important;
}

                            <div class="search_header">
                                        <form role="search" method="get" id="searchform" class="searchform" action="test">        
                                        <div>
                                                <label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label',  'QEPRize'); ?></label>
                                                        <input type="text" value="test" name="s" id="s" />
                                                        <input type="submit" class="btn fa-input" value="&#xf002;">   
                                        </div>
                                        </form>
                                </div>