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>