Header for smaller devices

I have been trying to create a header to the specification of my client with the logo on the left side and the site title and tag line on the right. When viewed on a smaller screen I would like the two to become centered.

I have tried using a row of blocks and two columns. On the whole I have had better success with the columns. In rows, as soon as the browser windows was resized, the logo image would start resizing with it until it was proportionally all wrong. I now have it in two columns and have tried using media queries to center the content, but, although the words will center, the logo image stays beligerently on the left. Looking in the Inspector for the page, the css mentions flex (flexbox?), but I don’t know how I can influence this, if it is the thing that is preventing what I want to do. Perhaps I have some settings wrong, but I cannot find them. Please can anyone point me in the right direction?

The current media query on the header is

@media only screen and (max-width: 940px) {
.headcolumns, .headercolumn, .headerlogo, .headertitle {
text-align: center!important;
}

Thank you

The page I need help with: [log in to see the link]