My image is being resized. I want to know why my picture is becoming skewed

My pictures are being resized, the set images are supposed to be 80x80, but they are displaying 40x80. The only way I have found to remove this problem is by getting rid of the box-sizing: border-box; However, I have to include the border-box to follow along with my assignment instructions. So, I can't remove it. I have also used inline styling to work around the problem, making the picture 133x80.

<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee Bar Music</title>
<meta charset="utf-8">
<link href="javajam.css"rel="stylesheet">
</head>
<body> 
    <div id="wrapper">
        <header> 
            <h1>
               <a href="index.html">JavaJam Coffee Bar</a>
            </h1>
         </header>
         <nav>
            <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="menu.html">Menu</a></li>
            <li><a href="music.html">Music</a></li>
            <li><a href="jobs.html">Jobs</a></li>
            </ul>
         </nav>
<main>
    <div id="heroguitar"></div>
    <h2> Music at JavaJam</h2>
    <p>The first Friday night each month at JavaJam is a special night. Join us from 8 pm to 11 pm for some music 
        you won't want to miss!</p>
    <h4>January</h4>
    <div class="details">
    <a href="melanie.jpg"><img src="melaniethumb.jpg" alt="Thumbnail Picture of Melanie"  class="floatleft" height="80" width="80"></a>
    <p>Melanie Morris entertains with her melodic folk style</p>
    </div>
    <h4>February</h4>
    <div class="details">
    <a href="greg.jpg"><img src="gregthumb.jpg" alt="Thumbnail Picture of Greg" class="floatleft" height="80" width="80"></a>
    <p>Tahoe Greg is back from his tour. New songs. New stories.</p>
    </div>
</main>
<footer>
    Copyright &copy; 2020 JavaJam Coffee Bar <br>
 </footer>
</div>
 </body>
 </html>

* {
    box-sizing: border-box; 
}

.floatleft {
    float: left;
    padding-right: 2em;
}