css flex - make gap between divs

Question

When in a landscape mode, I need to separate/make a gap (around 10-20px) between the two columns without using a border or anything like that. I tried everything and it still doesn't work, what am i missing? I tried putting margins, but it doesn't help, what's the best way to solve this?

@media screen and (min-width: 567px) {
  .container {
    display: flex;
    flex-flow: row wrap;
  }
  .container li {
    flex-basis: 50%;
    max-width: 50%;
  }
}

.item {
  display: flex;
  align-items: center;
  padding-top: 5px;
}

.title {
  font-weight: 500;
  font-size: 22px;
  padding-bottom: 18px;
}

.item-image {
  flex-basis: 85px;
  min-width: 85px;
  padding-bottom: 30px;
}

.item .item-image img {
  display: inline-block;
  vertical-align: middle;
  border-radius: 20px;
  width: 100%;
}

.item .item-info {
  border-bottom: 1px solid rgb(207, 206, 206);
  padding-bottom: 20px;
  flex-basis: 100%;
  margin-left: 15px;
}

<ul class="container">
  <li>
    <div class="item">
      <div class="item-image">
        <a href="">
          <img src="root-icon.png" alt="">
        </a>
      </div>
      <div class="item-info">
        <div class="item-title">Something</div>
        <div class="item-subtitle">Something</div>
        <div class="item-button-container">
          <a class="button" href="#">GET</a>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="item">
      <div class="item-image">
        <a href="">
          <img src="root-icon.png" alt="">
        </a>
      </div>
      <div class="item-info">
        <div class="item-title">Something</div>
        <div class="item-subtitle">Something</div>
        <div class="item-button-container">
          <a class="button" href="#">GET</a>
        </div>
      </div>
    </div>
  </li>
</ul>

Answer 1

Just add something like gap: 5px to your container with flex layout

Thanks to @AbsoluteBeginner this feature is supported not everywhere. See here: https://caniuse.com/flexbox-gap

Answer 2

You can add this CSS rule:

ul.container > *:nth-child(odd) .item-info {
  margin-right: 50px;
}

It adds a right marging to every odd .item-info (or more precisely: to every .item-info inside every odd direct child element of the .container element)

@media screen and (min-width: 567px) {
  .container {
    display: flex;
    flex-flow: row wrap;
  }
  .container li {
    flex-basis: 50%;
    max-width: 50%;
  }
}

.item {
  display: flex;
  align-items: center;
  padding-top: 5px;
}

.title {
  font-weight: 500;
  font-size: 22px;
  padding-bottom: 18px;
}

.item-image {
  flex-basis: 85px;
  min-width: 85px;
  padding-bottom: 30px;
}

.item .item-image img {
  display: inline-block;
  vertical-align: middle;
  border-radius: 20px;
  width: 100%;
}

.item .item-info {
  border-bottom: 1px solid rgb(207, 206, 206);
  padding-bottom: 20px;
  flex-basis: 100%;
  margin-left: 15px;
}
ul.container > *:nth-child(odd) .item-info {
  margin-right: 50px;
}

<ul class="container">
  <li>
    <div class="item">
      <div class="item-image">
        <a href="">
          <img src="root-icon.png" alt="">
        </a>
      </div>
      <div class="item-info">
        <div class="item-title">Something</div>
        <div class="item-subtitle">Something</div>
        <div class="item-button-container">
          <a class="button" href="#">GET</a>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="item">
      <div class="item-image">
        <a href="">
          <img src="root-icon.png" alt="">
        </a>
      </div>
      <div class="item-info">
        <div class="item-title">Something</div>
        <div class="item-subtitle">Something</div>
        <div class="item-button-container">
          <a class="button" href="#">GET</a>
        </div>
      </div>
    </div>
  </li>
</ul>

Answer 3

Add margin-right to the element if you want to stick to flexbox. Otherwise - try out css grid, super easy with grid-gap to add the gap you need.

https://www.w3schools.com/css/css_grid.asp