Мария Коробкоголовых

Вот неплохая статья про брейкпоинты. Оттуда же сразу демка на кодпене.

А на счет ширины контейнера -- это должен был дизайнер решать. Можно ширину в процентах задать и он будет резиновый. Не видя макета сложно что-то конкретное посоветовать

span:not(:last-child)::after {
  свойства
}

https://jsfiddle.net/rikazavr/mqfgwkrh/6/

Нашла похожий вопрос на stackoverflow

Если очень заботиться о семантике и доступности сайта, то лучше не стоит. Main представляет собой центральную (главную) часть вашей страницы и лучше не вкладывать в него навигацию типа header, footer.

Если дружишь с английским, советую пробежаться по полезным статьям:
html5doctor
The HTML element

На CodePen можно поискать решения по тегам "animate background color "

Типа такого или такого

transform: skew(-20deg,0deg);