Split the screen with two images side by side horizontally with equal dimensions using HTMl and CSS

I am using div tag with a width of 100% and height of 100%. Under the div, I put my first image with 50% width. When I put second image with same 50% width, the second image is going to the bottom of first image. If I change the width to 49%, second image is aligning to the right side of first image (which is expected). Any way the width of div is 100%, why the second image is going down if I put width as 50% ?

body {
  margin: 0px;
}

div {
  width: 100%;
  height: 100%;
}

.first-image {
  width: 50%;
  height: 100%;
  outline: 0px;
}

.second-image {
  width: 50%;
  height: 100%;
  outline: 0px;
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>project</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div>
      <img class="first-image" src="https://media.istockphoto.com/id/173682323/photo/says.jpg?s=612x612&w=0&k=20&c=7jnXQrYzUWNTnLhjPgimxHIbjsaHvZmAMALGVzYNARQ=" alt="first-image" />
      <img class="second-image" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg" alt="second-image" />
    </div>
  </body>
</html>

Solution

This is because white space also creates space in HTML.

It is the space between words, but the browser also respects spaces between HTML elements. Since there is a line-break and space between your two images you have a space between them. Remove these and the 50% width images also fit into one line.

If you set white-space: nowrap on your div you see the space more clearly (and also some scrollbars, since now the two images are bigger than the container and create some overflow)

As other answer said, best way to get rid of this is to just use flexbox for this kind of layout.

body {
  margin: 0px;
}

div {
  width: 100%;
  height: 100%;
}

.first-image {
  width: 50%;
  height: 100%;
  outline: 0px;
}

.second-image {
  width: 50%;
  height: 100%;
  outline: 0px;
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>project</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div>
      <img class="first-image" src="https://media.istockphoto.com/id/173682323/photo/says.jpg?s=612x612&w=0&k=20&c=7jnXQrYzUWNTnLhjPgimxHIbjsaHvZmAMALGVzYNARQ=" alt="first-image" />
      <img class="second-image" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg" alt="second-image" />
    </div>
    <div>
      <img class="first-image" src="https://media.istockphoto.com/id/173682323/photo/says.jpg?s=612x612&w=0&k=20&c=7jnXQrYzUWNTnLhjPgimxHIbjsaHvZmAMALGVzYNARQ=" alt="first-image" /><img class="second-image" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg" alt="second-image" />
    </div>
  </body>
</html>