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>

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"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    <?php else : ?>
        <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></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!