Change position of header image with default 2019 theme

Question

I am currently setting up a Wordpress website based on the default Twenty Nineteen theme. The theme allows to use a header image. The default position is on the top left as can be seen in the following image (red square).

However, I would like to change the position of the header image. I would like to display the header image at the top right, next to the navigation links as can be seen in the following picture (see position of the red square).

Obviously, the newly positioned header image would have a different size, that is, it would be wider.

My question is: Is there any best practice procedure to change the position of the header image for the Twenty Nineteen theme? I know that the theme is heavily tailored toward mobile display and therefore the structure of the page may not allow such a modification, but maybe there is away.

Answer 1

In the header file for the child theme there is a div with class of "site-branding-container"

It contains an h1 element and a p element. Just ad an img element after the p element. i.e.

<div class="site-branding-container">
    <div class="site-branding">

        <h1 class="site-title"><a href="https://wp-themes.com/" rel="home">Theme Preview</a></h1>

        <p class="site-description">Previewing Another WordPress Blog</p>

        <img src="https://cnet3.cbsistatic.com/img/Yt768C55hXNi2eGSB9qOv-e7SQg=/2011/03/16/c7675aa8-fdba-11e2-8c7c-d4ae52e62bcc/Chrome-logo-2011-03-16.jpg">

     </div><!-- .site-branding -->
</div>

Then adjust with css.