Николай Угольников

Судя по коду, у вас карточки обернуты в лишние div элементы. Уберите все эти div элементы, которые находятся внутри col

<div class="container my-2">
  <div class="row row-cols-1 row-cols-mb-2 row-cols-lg-3">
    <div class="col">
      <div class="card">
        <img src="Sasha.jpeg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <img src="Sasha.jpeg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <img src="Sasha.jpeg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

В вашем коде для подключения таблицы стилей используется атрибут src у тега , который предназначен для вставки изображений и не используется для подключения таблиц стилей.

Чтобы подключить таблицу стилей, вам нужно использовать атрибут href у тега , который указывает путь к файлу стилей. Ваш код должен выглядеть следующим образом:

<link rel="stylesheet" href="/практика номер 3/style.css" type="text/css">

p {
    position: relative;
}

p::before {
    content: "";
    position: absolute;
    top:  50%;
    left: -20px;
    transform: translateY(-50%);
    background: url();
    width: ... px;
    height: ... px;

.btn {
    -webkit-appearance: none;
    appearance: none;
}

<div>
    <img src="" alt="">
    <p>...</p>
</div>

div {
    display: flex;
}

Убери фиксированную высоту в .footer-bottom и в .footer-bottom__container

.footer-bottom {
	background: #000;
	 ̶h̶e̶i̶g̶h̶t̶:̶ ̶7̶0̶p̶x̶;̶

	&__container {
		max-width: 885px;
		margin: 0 auto;
		padding: 0 30px;
		display: flex;
		align-items: center;
		 ̶h̶e̶i̶g̶h̶t̶:̶ ̶7̶0̶p̶x̶;̶
	}
}

И почему, если псевдоэлемент по умолчанию inline, возможно проставить размеры height и width ?

А с чего должно быть невозможно? inline можно задавать размеры.

align-items: center; /*Свойство выравнивает псевдоэлемент внутри flex-контейнера "container_1" по высоте */

Если задать flex-direction: column, то будет уже выравнивать по ширине. Так что, выравнивает по центру поперечной оси

input::-webkit-calendar-picker-indicator{
    display: none;
}

Не вижу на странице ни одного элемента, который нужно абсолютно позиционировать. Используй display: flex и display: grid

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

HTML:

<section class="block">
    <div class="container block__container">

    </div>
</section>

CSS:

.block {
    position: relative;
}

.block__container::after {
    content: "";
    position: absolute;
    width: 50%;
    height: ;
    right: 0;
    top: 0;
    background: url (...) no-repeat;
    background-size: cover;
}

Почему нельзя через CSS?

<div id="menu">
    <nav class="nav-menu">
       <a href="/" class="menu-item__link menu-item__link--current">
         <svg></svg>
         <div class="item-link__text">Главная</div>
       </a>
       <a href="#" class="menu-item__link">
         <svg></svg>
         <div class="item-link__text">Книги</div>
       </a>
       <a href="#" class="menu-item__link">
         <svg></svg>
         <div class="item-link__text">Фильмы</div>
       </a>
       <a href="#" class="menu-item__link">
         <svg></svg>
         <div class="item-link__text">Истории</div>
       </a>
       <a href="#" class="menu-item__link">
         <svg></svg>
         <div class="item-link__text">Профиль</div>
       </a>
    </nav>
</div>

.menu-item__link--current {
    position: relative;
}

.menu-item__link--current::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: #fff;
    filter: blur(px);
}
}