Balance header elements

[Mike]

Mike

June 28, 2019 at 9:24 am

I’ve been wrestling with this for a few days, but can’t get it looking just right on both my ginormous 24″ monitor and my laptop screen and I know my client has both. In the header I’m using, in order, a logo that’s 400 pixels wide, a header widget with the hours, and a second header widget with the address and contact info. I probably don’t want them divided 1/3 each, but would like them balanced proportionately AND to span the entire header area if possible. I can’t seem to make that happen.

Here’s the SITE.

Here’s the CSS I have in place at the current time, although I’m wondering if I should start at square 1 at this point.

@media (min-width: 1200px) {
.kad-right-header.kt-header-flex-item {
width: 55%;
}
.kt-header-extras li.menu-widget-area-kt {
padding-right: 25px;
padding-left: 25px;
}
.image_menu_item_link .image_menu_message {
padding-bottom: 30px;
}
.kad-center-header.kt-header-flex-item {
display; none;
}
.kad-header-flex {
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
}

@media (min-width: 1250px) {
.container {
min-width: 1250px;
}
}

As always, I greatly appreciate any help you can provide. This is something I’ve wanted to do before so it would be nice to have this technique in my back pocket as I’m sure I’ll want to do it again.