Add Search Box next to social Icons

Hello, I have searched many threads but can’t seem to get this to work. I simply want to add the search box and magnifying glass to the right hand side of my two social icons. I tried pasting this code in the Quick CSS box but it’s not working.

@media only screen and (min-width: 990px) {
#top #menu-item-search {
right: -45vw;
}
}
@media only screen and (max-width: 989px) {
#top #menu-item-search {
right: -40vw;
}
}