So I am creating this responsive website, and the images were fine at first, but then I started working on other parts of the site and when I come back to the main page the first 2 images are small and the 3rd image is the correct size. I am not quite sure what happened. I used inspect element and the only attributes applied to the images are the ones mentioned below except the .left one. What seems to be the problem?
Worth mentioning that if I increase the width (now at 70%) all of the images grow at the same rate. The image size also comes back to normal as soon as I change the text of the image below. It seems that longer text makes the image grow bigger and vice versa.

Thank you in advance for the help and

HTML

<div class="hottest">
    <div>
        <a href="Bushido.html"><img src="img/main-page/444.jpg"/></a>
        <p>J-Cole: KOD</p>
        <button class="btn3"><a href="stock.html">Check out </a></button>
      </div>
    <div>
        <a href="Bushido.html"><img src="img/main-page/444.jpg" /></a>
        <p>Jay-Z: 444</p>
        <button class="btn3"><a href="stock.html">Check out </a></button>
      </div>
      <div>
        <a href="Bushido.html"><img src="img/main-page/hus.jpg" /></a>
        <p>J-Hus: Big Conspiracy</p>
        <button class="btn3"><a href="stock.html">Check out </a></button>
      </div>
</div>

CSS

.hottest {
  display: flex;
  justify-content: space-between;
  color: white;
  margin: 3vw;
  margin-bottom: 10vw;
  width: 100%;
}
.hottest p {
  padding-left: 1vw;
  margin: 1vw;
  font-size: 3vw;
}
.hottest .left {
  float: left;
  margin-right: 2vw;
}
.hottest a {
  text-decoration: none;
  color: black;
}

.hottest img {
  width: 70%;
}