andand44

Если просто, то так. Использовать gap

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px;
}

Можно так https://jsfiddle.net/k6ecgonr/
Но лучше так, если адаптивность нужна https://jsfiddle.net/qg0y5dko/

Вёрстка email делается с помощью таблиц. Воспользуйтесь фреймворком https://mjml.io/
Так будет более предсказуемый результат.

Нужно использовать clearfix. Есть разные варианты.
https://codepen.io/andand44/pen/QWgNMob
Ну или не использовать float, а использовать современные подходы для таких задач

https://css-tricks.com/full-width-containers-limit...
Например, так

.background {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Нужно отменить правило с top. top: auto;

.menu-burger-line_third {
    bottom: 0;
    top: auto;
}

Через before, after. В них можно выводить текст из html кода с помощью data атрибутов
https://jsfiddle.net/va82t9qx/

Адаптивной это значит на всю высоту экрана? vh прекрасно работает
https://codepen.io/andand44/pen/RwVXBBW

Растянутый блок, который находится в фиксированном по ширине контейнере, на всю ширину экрана
https://codepen.io/andand44/pen/NWjQGNb

https://css-tricks.com/full-width-containers-limit...
Есть несколько способов. Тут можно легко выбрать подходящий.

Дело в Inline-block у стрелок слайдера.
Можно задать родителю стрелок font-size: 0; если нужно быстрое решение.

https://css-live.ru/articles/zagadochnye-otstupy-m...

margin-top: -20px; вместо top: -20px; в .block-2

.block-2 {
  position: relative;
  margin-top: -20px;
  height: 300px;
  border: 2px solid green;
}

transform: translate(-1px, -1px); Сдвинет .product_specifications влево и вверх на ширину border

.product_specifications{
  text-align: center;
  border: 1px solid black;
  border-radius: 5px;
  font: bold calc(100vw/70) 'Roboto Condensed', sans-serif;
  padding-left: 3px;
  padding-right: 3px;
  position: relative;
  top: 0;
  transform: translate(-1px, -1px);
}