1. I want the Logo, tag line and the navigation bar in-line, which I have achieved.
2. I want the below section to have some space from the header as it is sliding inside the header which looks awkward.
3. I have used the Offset site header height field and it is not rendering any result.
I am not sure what you are using the Header Element for? Is it solely to change the color of the navigation?
If so then on the Page Hero tab paste this: <!-- Merged Header --> and then add 113px to the Offset Site Header Height