Антон Литвиненко

https://getbootstrap.com/docs/5.2/components/offcanvas/

не надо делить хедер на колонки бутстрап, если вы используете бутстрап это вовсе не значит что его сетку надо пихать вообще везде.

<header class="site-header">
  <div class="container">
    <div class="header-inner">

      <div class="header-logo">
        <a href="/">
          <img src="img/logo.svg" alt="Logo">
        </a>
      </div>

      <div class="header-info">
        <div class="header-address">Адресс</div>
        <div class="header-work-time">Время работы</div>
      </div>

      <nav class="main-navigation">
        <ul class="main-menu">
          <li><a href="#1">О нас</a></li>
          <li><a href="#1">Услуги</a></li>
          <li><a href="#1">Гарантии</a></li>
          <li><a href="#1">Контакты</a></li>
        </ul>
      </nav> 

      <div class="header-phone">
        <a href="tel:0505555555">050 555 55 55</a>
      </div>

    </div>
  </div>
</header>

вот такие классы у карточек
col col-md-4 col-xs-4
во-первых col-md-4 лишний, потому что бутстрап mobile-first
во вторых класс col автоматический, его нужно использовать осторожно, это он как хочет так и задает ширину, хотите контроль - задавайте руками, например
col-xs-6 col-md-4/ в этом случае на больших экранах будет три карточки, на планшетах две, на мобилках одна

Вот эта картинка выпирает

Адаптивным картинкам нужно давать max-width: 100%

.wrapper {
  margin-left: calc(50% - 1200px/2);
  padding: 0 15px;
}

Не забываем, что id должен быть уникален для каждого чекбокса и соотверственно лейбы, связанной с ним.
Поэтому более интересным решением будет подобная разметка

<label class="checkbox">
	<input type="checkbox">
	<span class="label_text">Я переключаю чекбокс</span>
</label>

С последующей стилизацией елемента label_text
Вот статья
https://dimox.name/custom-checkboxes-and-radio-but...

Разобраться как написан бутстрап очень даже не помешает. Бутстрап вылизан годами и читая его код можно почерпнуть много хороших практик. Мне, например, очень нравится, как в бутстрапе реализованы модальные окна. Настолько, что я написал свое решение, максимально похожее и таскаю его из проекта в проект.
Но нужно не выучить документацию, а именно разобрать код. Это не сделает вас гуру, но определённо не будет лишним

Я не знаю, за что отвечает обертка с классом card-group, но если хотите в бутстрап, то ваша разметка будет выглядеть както так

<div class="card-group">
	<div class="row">
		{% for post in post_list %}
		<div class="col-md-4">
			<div class="card" style="max-width: 250px; height: auto;">
				<div class="card-body">
					<h5 class="card-title">{{ post.title }}</h5>
					<p class="card-text">{{ post.body | truncate(100) | safe }}</p>
					<a href="{{ post.get_absolute_url() }}" class="card-link">View post</a>
					<p class="card-text">{{ post.date }}</p>
				</div>
			</div>
		</div>
		{% endfor %}
	</div>
</div>

У вас по умолчанию всегда должен быть прописан стиль
img { max-width: 100% }

начиная еще с третьего бутстрапа в его валидаторе было основное правило, что родителями колонок могут быть только ряды, а дочерними элементами рядов - колонки. Это связано со стилями сетки. В частности в четвертом бутстрапе у рядов стоит дисплей флекс, что подразумевает его влияние на потомков. Также рекомендуется не смешивать сетку и разметку, тоесть например какието карточки вставлять в колонки, а не делать карточками колонки.
Но, конечно, вам никто не запрещает делать как захочется

Если вы про чёрные обводки при фокусе, то это новые стили хрома. Меняйте outline на фокусе

Я так понимаю, что не сворачивает я меню после прокрутки до якоря? В 3м бутстрапе и не сворачивалось, возможно в 4м тоже. Надо дописать небольшой скрипт, я в гугле на стековерфлоу находил в свое время
Как сделать что бы меню в bootstrap в мобильной версии закрывалось при клике на пункте из меню?

закинул в песочницу, все работает. смотрите в инспекторе что происходит