How to place 2 images side by side without an space between them?

Question

I made this simple pen to explain my problem

https://codepen.io/yonatanmk/pen/VdwGvG

When I place 2 images next to each other with width 50% of the parent they always wind up too wide to be placed side by side and end up stacked on top of each other like block elements.

Why does this happen?

How can I place the 2 images side by side while occupying the full width of the parent div without any space in between them. Having a width of 49% allows the images to be placed side by side but now there's a space between them.

display : inline-block does not seem to help.

Thank you

My code

html

<div>
  <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
 <div>

css

div {
  width: 500px;
}

img {
  width: 50%;
}

This results in

Answer 1

With the code sample you provided, you can float the images and this will place them side by side with no margin.

img {
  width: 50%;
  float: left;
}

Answer 2

This is possible with the Classattribute which will specify the class name for the HTML element.

Your HTML code will look like this

<div class="row">
<div class="column">
<img src=http://www.planwallpaper.com/static/images/kitty-cat.jpg alt="planwallpaper" style="width:100%">
</div>
<div class="column">
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg"alt="Forest" style="width:100%">
</div>

And use the following code for the CSS

.column {
float: left;
width: 33.33%;
padding: 5px;
}

This will clear floats after image containers

.row::after {
 content: "";
 clear: both;
 display: table;
 }