Why aren’t all the product cards within the list wrapper?


Question is straightforward. Why aren’t the product cards "flowing" to the right? The second product card isn’t within the list-wrapper.

Extra question (maybe related): is there anything wrong with my choice of where to put my divs?

.list-wrapper {
  display: inline-flex;
  flex-wrap: wrap;
  left-margin: 5em;
  border: 2px solid grey;
  justify-content: space-evenly;
  width: 100%;
}

.product-card {
  display: flex;
  border: 1px dotted grey;
  margin: 20px 10px 20px 10px;
  padding: 5px;
  width: 30%;
  height: 200px;
}
<div>
  <div class="list-wrapper">
    <div class="product-card">
      <ol>
        <div class="wrapper">
          <div class="product-name">Product Name</div>
          <div class="product-basic-description">Comes in many colors and sizes</div>
          <div class=product-price>300.00 $</div>
          <div class=product-image><img src="" alt="{{ image-description }}"></div>
        </div>
    </div>
  </div>
  <div class="product-card">
    <div class="wrapper">
      <div class="product-name">Product Name</div>
      <div class="product-basic-description">Comes in many colors and sizes</div>
      <div class=product-price>300.00 $</div>
      <div class=product-image><img src="" alt="{{ image-description }}"></div>
    </div>
  </div>
</div>
</ol>
</div>
</div>

Source: CSS – Stack Overflow

December 3, 2021
Category : News
Tags: css | html

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.