Need to position and make my product cards look more like the ones shown in the image below 
<https://prnt.sc/mip9eb>

i have tried using `float:left;` but it only made 2 of the product cards position correctly.

These were made using bootstrap

```css
.container {
    width: 100%;
    height: 100%;
  }
  .container .product {
    width: 390px;
    height: 130px;
    display: flex;
    margin: 1em 0;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0px 0px 21px 3px rgba(0, 0, 0, 0.15);
    transition: all .1s ease-in-out;
    float: left;
  }
  .container .product .img-container {
    flex: 2;
  }
  .container .product .img-container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .container .product .product-info {
    background: #fff;
    flex: 3;
  }
  .container .product .product-info .product-content {
    padding: .2em 0 .2em 1em;
  }
  .container .product .product-info .product-content h1 {
    font-size: 1.5em;
  }
  .container .product .product-info .product-content p {
    color: #636363;
    font-size: .9em;
    font-weight: bold;
    width: 90%;
  }
  .container .product .product-info .product-content ul li {
    color: #636363;
    font-size: 9em;
    margin-left: 0;
  }
  .container .product .product-info .product-content .buttons {
    padding-top: .4em;
  }
  .container .product .product-info .product-content .buttons .button {
    text-decoration: none;
    color: #5e5e5e;
    font-weight: bold;
    padding: .3em .65em;
    border-radius: 2.3px;
    transition: all .1s ease-in-out;
  }
  .container .product .product-info .product-content .buttons .buy {
    border: 1px #5e5e5e solid;
  }
```

```html
<div class="container">

          <div class="product">
            <div class="img-container">
              <img src="https://icdn2.digitaltrends.com/image/oculus-go-press-720x720.jpg">
            </div>
            <div class="product-info">
              <div class="product-content">
                <h1>Oculus Go</h1>
                <ul>
                  <li>Lorem ipsum dolor sit ametconsectetu.</li>

                  <li>adipisicing elit dlanditiis quis ip.</li>
                </ul>
                <div class="buttons">
                  <a class="button buy" href="#">More Info</a>
                </div>
              </div>
            </div>
          </div>
</div>
```

Can someone guide me on how i can make the individual product cards look more like the ones in the image and how to position all 3 of them in a row