CSS

    .container_two {
        display: flex;
        height: 100px;
        gap: 1em;
        padding-bottom: 2em;
    }

    .inner {
        width: 33.33%
    }

    img.apples {
        max-width: 100%;
    }

HTML

    <div class="container_two">

        <div class="inner">
            <img src="../images/apples-marked-2700.webp" 
                alt="picture of apples"
                class="apples">
        </div>

        <div class="inner">
            <img src="../images/apples-marked-2700.webp" 
                alt="picture of apples"
                class="apples"></div>

        <div class="inner">
            <img src="../images/apples-marked-2700.webp" 
                alt="picture of apples"
                class="apples"></div>

    </div> 

Notes

1. The key declaration is

       img.apples {
           max-width: 100%;
       } 

2. The width of apples-marked-2700.webp is 2700px, much larger than the space available
3. Removal of the max-width:100% declaration causes the images to 'overflow' their containing tags.
4. Based on an example by Jamie Campbell (Skillsoft, Ireland)

CSS

    .wrapper,
    .wrapper_two {
        margin: auto;
        border: 5px solid var(--primary-green);
    }

    .wrapper {
        max-width: -moz-fit-content;
        max-width: fit-content;
    } 

HTML

    <div class="wrapper">
        <img src="../images/myFourSquares2.png" 
            alt="four coloured squares sprite image">
    </div> 

Notes

1. The key declaration is max-width: fit-content
2. The result of removing this declaration is shown in the next example

CSS

    .wrapper,
    .wrapper_two {
        margin: auto;
        border: 5px solid var(--primary-green);
    }

    .wrapper_two {
        width: 50%;
    } 

HTML

    <div class="wrapper">
        <img src="../images/myFourSquares2.png" 
            alt="four coloured squares sprite image">
    </div> 

Notes

1. This example is the same as the example above (Example 2), except that the declaration max-width:fit-content has neem replaced by width: 50%;