This is just a starting point, so you will probably need to do more work to finish this, particularly to fix the responsive display of the these elements. Also cross-browser compatibility has not been checked.
This CSS can be added to a child theme or entered into a custom CSS plugin (such as the custom CSS module of JetPack)
#header {
background: #333;
float: left;
width: 100%;
}
#header #logo {
width: 190px;
float: left;
position: absolute;
top: 8px;
margin-left: 10px;
}
#header .main-nav {
width: 75%;
float: right;
background: #333;
padding: 18px 0;
margin-right: 10px;
}
For specific support of the responsive theme in future, you should post in the responsive forum at http://wordpress.org/support/theme/responsive and provide a link to your site.