How to put hyperlink images with text overlay side by side

[sphwtsn]

Hello,

I am new to html and trying to add some to my website. Thanks to google and places like this, I've managed to successfully add some images with text overlay which hyperlink to other pages. However, each time I add an image like this, it places it below the last one instead of next to it. How do I get them to sit side by side?

Here's my html:

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}

.container {
  position: relative;
  width: 50%;
  max-width: 300px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.container:hover .overlay {
  opacity: 1;
}
</style>

<div class="container">
  <a href="https://melancholyapparel.com/collections/mens/Hoodie"><img src="https://cdn.shopify.com/s/files/1/0516/5039/6356/products/pullover-hoodie-mockup-featuring-a-bearded-man-with-a-beanie-28312_2048x.png?v=1608665853" alt="Avatar" class="image">
  <div class="overlay">Men's Hoodies</div>
</a></div>
<div class="container">
  <a href="https://melancholyapparel.com/collections/womens/Hoodie"><img src="https://cdn.shopify.com/s/files/1/0516/5039/6356/products/hoodie-mockup-of-a-woman-sitting-on-a-tree-stump-2780-el1_1728x.png?v=1612387598" alt="Avatar" class="image">
  <div class="overlay">Women's Hoodies</div>
</a></div>

[dsonesuk]

The div element is a block element, block elements effect is to occupy the total width area available, causing other elements following it to stack.

Fix: float or use display: inline-block; instead.