How to make top bar bigger without affecting the header

Hi, I have looked through the forum to create a larger top bar and used this css:

#header_meta .phone-info {
line-height: 40px;
}

The problem is, when I do that, whatever the first thing is on the page, in the main content, then goes up behind the header, as if a negative margin had been set, maybe a -10margin – so whatever the difference is – if the default top bar was 30 px, and I made it 40, then the 10 pixels gets cut off the bottom of the header, something like that.

Could you tell me the correct way to do this, where this would not happen? Thank you!