Ankhena

margin-bottom: 130px; для main

https://jsfiddle.net/fz3ek6xc/

.container {
  position: relative;
}

Просто flex
https://jsfiddle.net/3940rLtw/
У вас очень много лишних оберток, можно обойтись совсем без них.

Поскольку, CSS вы решили сохранить в тайне, то размеры сами подгоняйте.

Вот пример https://jsfiddle.net/2cx7oxay/
2 картинки, у второй в стайл указана ширина, у второй нет. Но есть ширина в стилях, можете ее убрать посмотреть что будет.

вот так: https://jsfiddle.net/ee0a8xno/

Теги <nobr> и <center> давно умерли https://webref.ru/html
Читайте про флексы: https://html5book.ru/css3-flexbox/

А еще лучше начните отсюда: https://htmlacademy.ru/ или со спецификации.

Потому что ширина инпута больше ширины родителя.

SHentai,
Я поняла, что не так.

Варианты решения:

1. уменьшайте кнопки (например, заменяйте на значки при разных media), чтобы они всегда умещались в одну строчку
2. задавайте сразу двойную высоту строки с кнопками
3. используйте flex
4. иcпользуйте media queries при разной ширине экрана задавайте разную высоту блокам.

И комбо этих вариантов.

С флексами https://jsfiddle.net/pag705Ln/

А шрифт-то где подключаете?

https://jsfiddle.net/4p6ugsgw/

https://jsfiddle.net/k7b153cu/

<main>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</main>


main {
  display: flex;
  justify-content: space-between;
  transform: rotate(-10deg);
  margin-top: 100px;
}
div {
  width: 50px;
  height: 50px;
  background: #0f0;
  border-radius: 50%;
}

Оптимальный способ на данный момент:
На флексах: задаете блокам нужный order при соответствующем media

По старинке:
Правый блок размещаете в коде первым. Задаете ему float:right. Левому left.

li:not(:last-child) {border-bottom:1px solid #eee;}

Типа того: https://jsfiddle.net/w70L67q6/
Дальше можно играть в угол наклона градиента, радиусы, отступы и т.д. для достижения большей плавности линий.

Это чтоль?

pixelperfect как понял только для px

С чего бы это?
Есть макет, для абстрактности на ширину 600 точек, в нем 2 колонки, в ТЗ указано, что блоки занимают по 50%. Ставите эти 50%. На ширине 600 получаете свои 300 необходимые для pixelperfect.

Pixelperfect проверяется на тех размерах, для которых есть макеты.

Лучший: использовать SVG

А если менять PNG, то спрайты.

https://jsfiddle.net/pwtmb809/
границы так, для видимости