Animate Extra Elements in header

Another question about the same element.
In order to make the extra elements bar taller, I have used the suggestion from https://kriesi.at/support/topic/extra-elements-section-taller/

I tried css of
#header_meta .container {
padding: 15px 0!important;;
}

Works fine…but it seems to move stuff BELOW the extra elements bar over each other.

Look on the Prayer List page which has a Title. Its url is: https://calvarybaptistdunnellon.com/prayer-list

The title will get covered up when you type in the css above which makes the extra element bar taller.

I have left the css OUT of my actual website, so you can see how it works — or doesn’t.

Can you give me an idea of what I need to do to make the extra elements bar taller and NOT cover the elements below.

Yes! Your additonal padding did the trick! It prevented the header from coming down over the page title when correcting height of extra elements bar. Terrific!

However (and don’t you just hate that word), while trying to solve that problem, I messed up the animation and can’t get it to work for me.
I am not sure if I am messing up the METHOD or the SELECTOR. Below are the two methods I’m trying. I have removed them from my css so you can point me to the proper solution:

Please look at page: https://calvarybaptistdunnellon.com

Honestly, don’t care if from right or left, just would like to see animation working.

Thanks for checking this out…and appreciate the extra elements height solution.

Method #1
#top div.phone-info{
visibility: visible;
animation: caption-left 2s s cubic-bezier(0.985,0.005,0.265,1)!important;
}

Method #2
//https://kriesi.at/support/search/?bbp_search=animate+left+to+right

@keyframes slide-in-left {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
@keyframes slide-in-right {
from {
transform: translateX(100%);
}

to {
transform: translateX(0%);
}
}

//#top div.phone-info {
//.phone-info{
#top div.phone-info div {
animation: slide-in-right 1000ms!important;
//animation: slide-in-left!important;
}