Size of Image Not Changing

Hello everyone. I am trying to change the size of a second image on a web page by using CSS inside a file called PlazaDeMayo.html.

The problem is that even when I attempt to change the width and the height with the “Inspect” tool in the web browser, the size of the image still does not change.

The following is what I am seeing in the web browser with the “Inspect” tool:

The following is the full view of the web page:

The following is the source code for the PlazaDeMayo.html file:

{% load static %}
<!DOCTYPE html>
<html>
<style>
    h1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 30px;
    }

    .site-text1 {
        position: fixed;
        /* width: 48%; */
        bottom: 20px;
        left: 15px;
    }

    .site-text2 {
        position: fixed;
        max-width: 48%;
        height: auto;
        top: 95px;
        right: 10px;
    }

    p {
        font-family: "Lucida Console", "Courier New", monospace;
        font-size: 1em;
    }
</style>
<body>
    <div class="site-text1">
        <br><h1>Plaza De Mayo</h1>

        <p>Being the oldest public square in Buenos Aires, Plaza De Mayo is
        <br> sacred to the city's native residents. The square has experienced 
        <br> important events throughout history. From the second founding of 
        <br> the city in 1580 through the revolution of independence in 1810, 
        <br> also known as the May Revolution of Buenos Aires, the plaza has
        <br> seen vehement protest or jubilant celebration. Argentina's first 
        <br> political rally was held here in 1890. Plaza De Mayo represents 
        <br> the scars and advancements of Argentina's history.
        </p>
        <img src="{% static '/images/plaza-de-mayo.jpg' %}">
    </div>

    <div class="site-text2">
        <img src="{% static '/images/plaza-de-mayo2.jpeg' %}">
    </div>
</body>
</html>