Alignment of Title and Logo on pc vs mobile

Right now I’m working on a mockup for a website, and I’ve used the header.php workaround to get the logo and the site title on the same line. I’ve had issues though getting the mobile and pc versions to be the same… right now the pc version of the site the title overlaps the logo but the mobile seems fine. I’m using this:

a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" /></a
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

in the header php, and I’ve added this for custom CSS:

.site-logo {
position:fixed; left: 0;
top: 0
!important;
}
.site-title {position: relative; left: 30px;
top: 0
!important;
}

If I go any higher on the pixels the mobile site title will go out of bounds, but it’s not enough to make the title work on the pc. I can send the site in a DM if it helps. I’d like to have the alignment be as dynamic as possible. Thank you in advance. Also, because of the Header.php, it seems like the font on Mobile seems small for the title. Any thoughts on that would be appreciated.

Now that I look at it again, the PC version changes horribly as the screen changes. Obviously I’m not great at CSS.

Hello, can you please provide a link to your website in order to let me check your header?

You can use some link shortener if you don’t want to leave the link to your site in this topic.

Kind Regards, Roman.
aThemes Support