having issue with the display flex option

Question

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.

Answer 1

I think it's a line of code that is missing in your css code. In the class '.card-container', you might want to add this line :

flex-direction: row;

Also, in your html page, you want your cards to be in the same container. Right now, each of your cards are in a distinct container. If you want them to be in a row, you then have to put them in the same container. Your code should look something like that :

<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 sit amet consectetur adipisicing elit. Quas
      praesentium similique, libero perspiciatis neque veniam perferendis
      deleniti, esse necessitatibus sed
    </p>
    <a href="" class="btn">Read More!</a>
  </div>
</div>

<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 sit amet consectetur adipisicing elit. Quas
      praesentium similique, libero perspiciatis neque veniam perferendis
      deleniti, esse necessitatibus sed
    </p>
    <a href="" class="btn">Read More!</a>
  </div>
</div>