SOLVED: Simple responsive mobile header

Ok, I’ve read the other posts on this topic and nobody seems to be able to describe how to create a simple mobile-first header which is fixed width (eg 300px) and has a logo floating left and group of buttons/icons/links floating right. See below. Someone please just explain how to do this without asking me to deconstruct the Bubble menu which is way more than I need. Thanks in advance!

PS I tried this:

Group Header (fixed width 320px)

Group Header Left (fixed width 100px)

Logo link (fixed 90px)
Group Header Right (fixed width 200px)
Search link (fixed 60px), Profile link (fixed 60px), Post link (fixed 60px)

SOLVED: I figured it out after watching the responsive tutorial video linked from the Responsive Editor. The key insights were using the left and right align margins and the collapse menu for smaller viewports (I did less than 700px) so you get full width on most mobile devices.