As you can see, the articles on the home just slid inside the header.
Also, editing header is a pain, how to increase or decrease the size of the header.
OK, so currently you have the Header Element > Site Header set to Merged with Content. Is that needed? If not set it to no merge. Or increase the value of the Offset Site Header Height field.
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