Search box in site header

This might go beyond support but figured I’d give it a go.

I want to add a search box between my logo and the nav menu and want to know if I’m on the right track.

I’ve added this to my header.php which adds the search shortcode to my header:

<div id="header-search-box" style="width: 30%; display: inline-block; vertical-align: top;">
 <?php {
                            echo do_shortcode('[gd_advanced_search]');
                        }
                        ?>
</div>

From there I assume that I just use css to adjust all the divs/sections within the search shortcode to my liking. (Let me know if correct here)

If the above is correct, I am having an issue with the responsive style when I decrease my browser width. Before adding the search box it was seamless when switching between the mobile view and the browser view. However, with the search short code added I’ve noticed that the nav menu now wraps below instead of pushing it to mobile view.

Would like to know if I’m on right track or if there is an easier way to add a search box to the header.

Thanks