[Theme: Twenty Eleven] Custom logos not resizing on mobile device

I’m using a twenty eleven child theme in which I’ve replaced the site title and description with a logo image floated to the left. I’ve also replaced the Search box with a second logo image floated to the right. Since it took me many hours of searching to find out how to do this, I was very pleased when I finally got it to work. However, imagine my dismay when I checked the site on a mobile device to discover that the responsive design was not resizing the two logo images, thus messing up the look of the site. I’m hoping someone might be able to advise me on how to make the two logo images resize appropriately.
I modified <hgroup> in header.php in my child theme as follows to make the two logo images appear in place of the site title/description and search box:

<div id="site-name-left"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img id="site-name" src="https://kusikawsay.org/wp/wp-content/uploads/header400x100.png" alt="Kusi Kawsay Andean School" /></a></div>
<div id="school-logo-right"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img id="school-logo" src="https://kusikawsay.org/wp/wp-content/uploads/logo125x125.png" alt="Kusi Kawsay Logo" /></a></div>
<div class="clear"></div>

The corresponding lines in style.css in my child theme are:

#site-name-left { float: left; }
img#site-name { width: auto; margin: 2em 0; }
#school-logo-right { float: right; }
img#school-logo { width: auto; margin: 2em 0; }
div.clear { clear: both; }

My site URL is https://kusikawsay.org/wp/

https://www.ads-software.com/extend/themes/twentyeleven/