How to create bootstrap markup for a shopping cart?

Question

HTML

Good evening dear connoisseurs. The following question has come up: How to properly organize such a basket on a grid.
An example with a grid:

An example without a grid where the borders are clearly visible:

I have a structure like this, but I think it is very wrong in this situation. Something about col-md-offset catches up with me:

<div class="container">
  <div class="row">
    <div class="col-md-11 baskets">
      <div class="row">
        <div class="col-md-11">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

And CSS:

.baskets {
  border: 1px solid black;
  border-radius: 5px;
}

.baskets li {
  list-style-type: none;
  display: inline-block;
  vertical-align: middle;
}

Thank you very much for any information on this matter.

Answer 1

How to properly organize such a basket on a grid.

the designer should have asked this question in the first place. and make a grid layout. he did it off the grid. which means:
1) layout these elements without the bootstrap grid
2) contact the designer with the question why the layout is not on the grid. and let it redraw