Gadgets are inherently difficult to make responsive, but there are ways to improve that.
If you use pixels to position them they will definitely not be responsive, it is always better to use a percentage for the position so that it scales with the browser.
Also if a gadget will be positioned to the right, it is best to change the default left positioning to a right positioning using the method described under /*Changing Header gadgets & Header Extra HTML X positioning from left to right*/ in the thread below
http://forum.weavertheme.com/discussion/5462/infos-and-examples-for-custom-css-rules-part8#Item_1
But in your case, there is no way this will ever work, as the Title / tagline, star and text are simply too big to fit all side by side on all browser sizes.
First thing, is to decide what behavior you want when the browser gets too small.
Do you want all of them to scale down and remain side by side, or do you want them to stack up, with Site Title / Tagline below that (probably the best method so the logo remain big enough).
In both cases, you do want to use the Header Widget area with two widgets, plus some Custom CSS.
So what you want is to hide the Site title and tagline with the option in Main options > Header > Site Title / tagline (including the hide on mobile).
Then use the header widget area with two widgets, one that will contain the site title and tagline (done manually with HTML), and one that will contain the star and the text.
Then to make the two widgets stack under a certain browser width, you can use the second method explained in the first item of the thread below
http://forum.weavertheme.com/discussion/8566/infos-and-examples-for-custom-css-rules-part-11#Item_1
Once that is in place we can help with the Custom CSS to get your star .png image to overlap the menu bar and the top of the site.