Custom CSS: branding image and title

Hi – I’m new to adding custom CSS, but I do have a little bit of experience of simple coding.

My client requires a very specific layout for the the site branding and logo.

He wants the dog image (his logo) to appear in the top left of the home page, i.e. the logo is the very first item, followed by Title and Tagline, immediately on the right of the image. I can’t work out how to achieve this simply, with a minimum of CSS. Can anyone explain what I need to add, please?

My custom CSS at present is:

.site-header .site-branding {
margin: 0 2em 0 0;
}

.site-header {
display: flex;
align-items: center;
padding: 2em 1em;
}

.custom-logo {
vertical-align: middle;
padding:-
}
I’m not clear if some or all of this is wrong?

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