Unable to make site header mobile responsive

I make minor adjustments to a site that was previously built by another developer. The site was build using WordPress Twenty Twelve theme and uses a child theme. I am pretty good with wordpress, but by no means am I a pro here. I have been banging my head for over a week now trying to figure out where I’ve gone wrong in updating their header.

The header image looks great on the desktop site, but on mobile, the image obliterates everything else.

I’ve tried making several adjustments throughout the style sheets but nothing seems to correct the problem.

Can someone help me figure out where I need to change the code to make this box fit with he rest of the page?

I’ve been able to narrow down the header code, which is where I changed the image. It reads <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img class="branding" alt="<?php bloginfo( 'name' ); ?>" src="<?php bloginfo('stylesheet_directory'); ?>/images/slider3.png"></a></h1></hgroup>