The problems you have are due to the (over)use of floats, relative positioning and ‘magic numbers’ to force a layout, which makes it very fragile in a responsive page.
The key is to keep everything in the natural flow of the page, otherwise you will get these overlaps when the page is resized.
For some reason you have put the search boxes outside of the header element, then tried to force it back into the header via relative positioning, not a good idea. There they have no regard to flow whatsoever. If you want it in the header, put it in the header element.
1 Like