Extending menu bar background

Hello,

I’m new to wordpress, this is my first go at creating a site. I am trying to extend the background of the menu bar as shown in this mock up image:

View post on imgur.com

Additionally, I wanted to either remove the search bar altogether, or move it to become a part of the menu bar. I moved it down, so its hidden behind the menu bar, but it seems like a messy fix, so if you have any advice here that would be great. Here is the code I used to do it:

#header .social-search {
margin-bottom: -40px;

Thanks for your help,

Megan