Doubt related to borders in CSS

While I add the border to Cappucchino and Mocha images, the images are crossing the border limit. I am curious to know why is this happening and how can it be resolved. I have uploaded my screenshots of the code. It would be great if my issue is resolved.

Code of “index.html”

<!DOCTYPE html>

<html>
    <head>
        <title>Best Coffee store in India</title>
        <link rel="stylesheet" type="text/css" href="coffeeshop.css">
    </head>

    <body>
        <div class="available-coffee out-of-stock" id="mocha">
            <h4>Mocha</h4>
            <img src="mocha.png" class="image">
        </div>

        <div class="available-coffee in-stock">
            <h4>Cappucchino</h4>
            <img src="cappucchino.png" class="image">
        </div>
    </body>
</html>

@f20201586 <h4> tag may have some default padding and margin, adding the following in the css file should work:

h4{
    margin:0;
    padding:0;
}

Thank you, my doubt is solved !

1 Like