[SOLVED] Html images suddenly appearing smaller than what they're supposed to be

Html images suddenly appearing smaller than what they're supposed to be

I'm designing a webpage in html that should have three side by side images that link to individual websites, followed by three more images beneath them. The code used to work well, but now all the images appear very small when viewed in the web browser. I have no idea why this is happening.

I have this code within a rich text field in knack, if that's at all relevant.

What you'll also notice is that the last image in each row is stretched unlike the others, I've always had this problem. Any solutions would be much appreciated.

Here's what the images are supposed to look like

Here's what the images actually look like

Here's my code:

<html>
<head>
<style>
* {
  box-sizing: border-box;
}
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>
<div class="row">
    <div class="column">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </div>
</div>
</body>
</html><html>
<head>
<style>
* {
  box-sizing: border-box;
}
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>
<div class="row">
    <div class="column">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </div>
</div>
</body>
</html>

I tried re-writing the code and forcing the images to be a certain width and height. Not sure where to go from here.

Solution

So turns out that the site I'm using - knack - doesn't really allow users to implement custom webpages with their own html code. The images will always appear off no matter what I do.

Thanks a lot for the clean code and tips though!