I am trying to make this card using HTML and CSS but the cards do not display next to each other.My current is that is it because my image is too big?
Current code:
* { margin: 0px; padding: 0px; box-sizing: border-box; font-family: sans-serif;}body { background-color: #f0f0f0;}.card-container { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 100px;}.card { width: 325px; background: #f0f0f0; border-radius: 8px; overflow: hidden; box-shadow: 0px 2px 4px rgb(0, 0, 0, 0.2); margin: 20px;}.card img { width: 100%; height: auto;}.card-content { padding: 16px;}.card-content h3 { font-size: 28px; margin-bottom: 8px;}.card-content p { color: #666; font-size: 15px; line-height: 1.3;}.card-content .btn { display: inline-block; padding: 8px 16px; background-color: #333; text-decoration: none; border-radius: 4px; margin-top: 16px; color: #fff;}<div class="card-container"><div class="card"><img src="images/nike.jpg" alt="nikeshoes" class="card-image" /><div class="card-content"><h3>Nike Shoes</h3><p> Lorem ipsum dolor...</p><a href="" class="btn">Read More!</a></div></div></div><div class="card-container"><div class="card"><img src="images/nike.jpg" alt="nikeshoes" class="card-image" /><div class="card-content"><h3>Nike Shoes</h3><p> Lorem ipsum dolor...</p><a href="" class="btn">Read More!</a></div></div></div>I used the display flex property and was expecting my cards to display next to each other but instead, they are in a straight line with one being on top of the other.