Сергей Т

1 - Используй псевдоэлемент :first-letter и добавь ему отрицательный margin-left

p:first-letter {
  margin-left: -6px
}

2 - Или если eсть возможность то оберни первый знак в span и расположи через абсолютное позиционирование

3 - Или добавь через псевдоэлемент нужный символ и тоже расположи через абсолютное позиционирование

Можно сделать так:

<div class="checkbox">
  <input type="checkbox" id="checkbox" class="checkbox__input">
  <label for="checkbox" class="checkbox__label"></label>
  <p class="checkbox__text">Lorem ipsum <a href="#">policy</a> aspernatur minima.</p>
</div>

Лейблу задаешь абсолютную позицию и растягиваешь на весь блок, а ссылке релатив и z-index выше чем у лейбла

Почитай про блочную модель и свойство box-sizing
https://doka.guide/css/box-model/
https://doka.guide/css/box-sizing/

Оборачиваешь текст в div и задаешь ему картинку в качестве фона свойством background-image

У тебя header-bottom находится внутри header__container. Либо вынеси его от туда либо, как я понял ты хочешь чтобы header-top перекрывал header-bottom, в этом случает тебе z-index надо ставить для header-top а не для header__container

для контейнера position: relative, для кнопки position: absolute и распологайте кнопку как душе угодно свойствами top и right

оберни все в общий контейнер, и сделай контейнеру display: flex
или

display: grid;
grid-templates-columns: 1fr 1fr;

размеры колонок делаешь какие необходимо

добавь в head

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">