Remove spacing on Header Extra Area

Hey Kriesi team!

I am customizing the Enfold theme to fit the design and I need to reduce the header spacing on Header Phone Number/Extra Info area. This is also called “Small bar above Main Menu” in the advanced styling area.

Here’s my current CSS:

.phone-info {
position: relative;
top: 50px;
right: 20px;
}
#top .header_color .current-menu-item a {
color: #cc3300 !important;
}
#header_meta {
border-top: none;
max-height: 0px;
}
#header .container_wrap {
border: none;
}
.header_bg { opacity: 1 !important; }

.main_menu ul:first-child > li > a { text-transform: uppercase; }

.main_menu ul:first-child > li > a{
padding: 0 40px !important;
}
#header_meta {
max-height: 0px;
}

#header_meta .container {
max-height: 0px;
}
#header_meta .container {
min-height: 0px;
}

I can’t get the extra elements to shrink down:
https://www.evernote.com/shard/s642/sh/3c59447b-58e7-4072-829d-a607195359ce/a3e741fd41301d136d2d128c14be4e95

I have highlighted the area that I need to reduce the size on. It is just empty space at the top of the header area.

I need the phone number to show with the icon, but I do not need the extra space. Is there a better way to do this?