Thanks for your quick and comprehensive reply. The problem is confirmed to be the CSS I applied to Header Widget Area. Upon your suggestion I looked into the z-index property and added it to the code, which now looks like this:
.header-widget {
position: absolute;
top: 40px;
right: 20px;
z-index: 1
}
I hope its the correct way to place the widget where I want it, i.e. towards the right of the header. If there is a better way, please let me know, thanks. Otherwise, this matter is solved!