Адаптивная сетка с боковыми панелями CSS grid некорректно работает

Question

смотрел на ютубе курс по HTML и CSS писал все как он а получается по другому, т.е надо сделать так что бы были отступы справа и слева (там должны быть навигационные панели, их делать не надо если что я сам сделаю надо только отступы и картинку по центру) и картинки с текстом были по центру

https://www.youtube.com/watch?v=Bmtu5eNnjK8&t=14970s&ab_channel=PythonHubStudio (ccылка на видео и на скрине видны минуты, ну чуть назад пролистать) что б легче было понять что не так

.main-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(1);
}


/* @media (max-width: 800px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5);
  }
}

@media (max-width: 600px) {
  .container {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(9);
  }
  .card {
    margin-inline: 0;
  }
} */

<div class="main-container">
  <div class="left-bar"></div>
  <div class="container">
    <div class="card">
      <a href="#">
        <img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt="">
      </a>
      <div class="info">
        <a href="#">
          <p>Чебуреки</p>
        </a>
        <a href="#">
          <p>25</p>
        </a>
        <button>Купить сейчас</button>
      </div>
    </div>
    <div class="card">
      <a href="#">
        <img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt="">
      </a>
      <div class="info">
        <a href="#">
          <p>Чебуреки</p>
        </a>
        <a href="#">
          <p>25</p>
        </a>
        <button>Купить сейчас</button>
      </div>
    </div>
    <div class="card">
      <a href="#">
        <img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt="">
      </a>
      <div class="info">
        <a href="#">
          <p>Чебуреки</p>
        </a>
        <a href="#">
          <p>25</p>
        </a>
        <button>Купить сейчас</button>
      </div>
    </div>
    <div class="card">
      <a href="#">
        <img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt="">
      </a>
      <div class="info">
        <a href="#">
          <p>Чебуреки</p>
        </a>
        <a href="#">
          <p>25</p>
        </a>
        <button>Купить сейчас</button>
      </div>
    </div>
    <div class="card">
      <a href="#">
        <img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt="">
      </a>
      <div class="info">
        <a href="#">
          <p>Чебуреки</p>
        </a>
        <a href="#">
          <p>25</p>
        </a>
        <button>Купить сейчас</button>
      </div>
    </div>
    <div class="card">
      <a href="#">
        <img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt="">
      </a>
      <div class="info">
        <a href="#">
          <p>Чебуреки</p>
        </a>
        <a href="#">
          <p>25</p>
        </a>
        <button>Купить сейчас</button>
      </div>
    </div>
    <div class="card">
      <a href="#"><img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt=""></a>
      <div class="info">
        <a href="#">
          <p>Чебуреки</p>
        </a>
        <a href="#">
          <p>25</p>
        </a>
        <button>Купить сейчас</button>
      </div>
    </div>
    <div class="card">
      <a href="#">
        <img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt="">
      </a>
      <div class="info">
        <a href="#">
          <p>Чебуреки</p>
        </a>
        <a href="#">
          <p>25</p>
        </a>
        <button>Купить сейчас</button>
      </div>
    </div>
    <div class="card">
      <a href="#">
        <img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt="">
      </a>
      <div class="info">
        <a href="#">
          <p>Чебуреки</p>
        </a>
        <a href="#">
          <p>25</p>
        </a>
        <button>Купить сейчас</button>
      </div>
    </div>
  </div>
  <div class="right-bar"></div>
</div>

БЛОГ НА HUSL

Адаптивная сетка с боковыми панелями CSS grid некорректно работает

Ответы (0 шт):