Main problem you have that pseudo-element “:before” for the .widget_search div, but then you assign a width of 150px to the searchform, so the widget_search will be 100% and that form only 150px, so it’s not a problem o left and right, is a problem of tell something to stay before something of (say) 1000px of width and tell something inside it to be 150px (and to the right).
Also I “.searchform” and “#searchform”, but I think you’re using “#searchform”.
My solution to your problem?
1. replace those “.searchform” with “#searchform” ??
2. add this to your style
#navbar-top .widget_search {
float:right;
width: 50px;
}
#navbar-top .widget_search:hover {
width: 250px; /*adjust this to suit your needs*/
}
#navbar-top .widget_search:hover:before {
display: none;
}
Hope this helps