мои bootstrap карты прячутся под боковой панелью

Question

Я добавил карты bootstrap (на рисунке ниже) все работает нормально. но проблема в том, что когда я добавляю боковую панель и навигационную панель (на самом деле другой файл, я включил его с php). Карты, которые находятся на левой стороне экрана, прячутся под боковой панелью. если я напишу следующее css, тогда для каждой карты потребуется маржа в 200px. то, что я хочу, это только карты, которые находятся на левой стороне, должны двигаться влево, и расстояние между каждой картой должно оставаться одинаковым. Я также пробовал кадры, но не работает.

.cards{
         margin-left:200px;
  }

Answer 1

Я не уверен, как выглядит ваш html, но давайте предположим, что это так:

<div class="content">
  <aside> ... menu </aside>
  <main> ... cards </main>
<div>

Вы можете написать css так:

.content { display: flex }
aside { width: 200px }
main { width: calc(100% - 200px) }

Надеюсь, я понял вопрос.