Search Bar within the Primary Menu

I’ve been attempting to add a searchbar within my primary menu, however I cannot get the CSS to apply. The search bar does appear at the end of my primary menu, but it doesn’t look good.

I used the code off of https://diythemes.com/thesis/rtfm/add-search-form-wp-wordpress-nav-menus/

PHP placed in “theme-functions.php”

function add_search_to_wp_menu ( $items, $args ) {
	if( 'primary' === $args -> theme_location ) {
$items .= '<li class="menu-item menu-item-search">';
$items .= '<form method="get" class="menu-search-form" action="' . get_bloginfo('home') . '/"><p><input class="text_input" type="text" value="Enter Text & Click to Search" name="s" id="s" onfocus="if (this.value == \'Enter Text & Click to Search\') {this.value = \'\';}" onblur="if (this.value == \'\') {this.value = \'Enter Text & Click to Search\';}" /><input type="submit" class="my-wp-search" id="searchsubmit" value="search" /></p></form>';
$items .= '</li>';
	}
return $items;
}
add_filter('wp_nav_menu_items','add_search_to_wp_menu',10,2);

I wasn’t sure where to place the CSS so I tried multiple locations: the “Edit CSS” which is supposed to be the last CSS applied, style.css, header.php in style tags, and custom-styles.php.

.custom .menu-item.menu-item-search { float:right; width:260px; }
.custom .menu-search-form { float:right; padding-top:3px; width:250px; }
.custom form.menu-search-form { width:auto; }
.custom form.menu-search-form #s { background:#fff; border:1px solid #000; font-size:11px; margin:0 2px 0 0; padding:2px; width:180px; float:left; }
.custom .menu-search-form input#searchsubmit.my-wp-search { background:#000; color:#fff; cursor:pointer; float:right; padding:2px; text-transform:uppercase; }

Any thoughts on how to manipulate the appearance of the search bar once it prints onto the menu?