CSS not displaying .custom-logo properly, is PHP the problem? - php

Question

I have tried several things, ultimately what should work to allow the graphic to display at full image size is this:
.custom-logo {
max-width: 100%;
}
It's not working. It will only display the .custom-logo at 225 x 225 for whatever reason and I cannot seem to override the WP template. I'm not a PHP expert, but from what I can tell from inspecting the image, it seems to have something to do with the template PHP code. Here is the code that is displaying the logo. Any thoughts to allow the image to display at full size would be helpful! Clearly there's something I'm missing.
<div class="site-branding">
<?php has_custom_logo() ? the_custom_logo() : ''; ?>
<div class="site-branding-text">
<?php if ( is_front_page() ) : ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php else : ?>
<p class="site-title"><?php bloginfo( 'name' ); ?></p>
<?php
endif;
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
<?php
endif; ?>
</div><!-- .site-branding-text-->
Thanks!

Answer 1

max-width doesn't set the width of the image, it sets the max width it is allowed to resize to.
Use width: 100%; to set the width of your image to 100% of it's space.
img{
border: 1px solid black;
}
#div1 img{
max-width: 100%;
}
#div2 img{
width: 100%;
}
max-width: 100%
<div id="div1">
<img src="https://via.placeholder.com/150">
</div>
width: 100%
<div id="div2">
<img src="https://via.placeholder.com/150">
</div>