How to Make aCustom Header with logo left, Tagline/phone middle and social right

I have a design with logo left, Tagline/phone middle and social right
Enfold has nice header options. I tried going to Appearance – Widgets – and typed in “header” and clicked the green button called ADD WIDGET AREA. I see the “header” now in the widget page… added a text box and put this in it…
<p align=”center” class=”mid-header-top”> SHANNON CONSTRUCTION<br>
& REMODELING, LLC. </p>
<p align=”center” class=”mid-header-bottom”>Atlanta, Georgia | 678-409-2132 </p>

I ftp’d to custom.css in the theme folder and added:

.mid-header-bottom
{
font-family : Open Sans;
font-weight : bold;
font-size : 18px;
line-height : 27px;
color : #000000;
color : rgb(0, 0, 0);
}
.mid-header-top
{
font-family : Josefin Slab;
font-size : 22px;
line-height : 23px;
color : #000000;
color : rgb(0, 0, 0);
}
_________

I do not see the text in the header…
I tried adding some code on the custom.css I found on your forum:
#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
}
______

still don’t see the tagline in the header.

I see articles about adding lines to the functions.php – but thought the “ADD WIDGET AREA” put it in functions.php

The site in development is in private

Anyone have ideas/help???