tigra

простых способов, сделать такие объекты css-ом, нет. Нужно извращаться цепляя к блокам псевдоэлементы и ещё извращаться над ними, абсолютно их позиционируя.
Как один из вариантов, взять один блок(левый) картинкой, сделать из него правый, отразив его по горизонтали и увеличив. Нижний блок сделать прямоугольником нужного цвета и прицепить псевдоэлементами слева и справа наш блок(картинку).
Итого: будет подгружаться 1 картинка, а использоваться аж 4 раза
P.S. я бы на твоём месте запилил все 3 блока картинками и не махал себе мозги, цвет всего 1 и 1 картинка будет весить 2-3кб.

https://jsfiddle.net/tigroid3/57s3cvnc/

выносишь кнопку вперёд за этот блок, оборачиваешь всё в див и профит, js не требуется

<div class="wrap-block">
<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>
  <span class="block__button">Next</span>
  </div>

.wrap-block {
  width:754px;
  margin:0 auto;
  position:relative;
}

ну если у тебя просто html будет без php, то скрывать блоки изначально и при клике делать видимым блок по какому нибудь идентификатору. Если с php, то ajax'ом подтягивать

float: rigth;
очепятка

в рамках браузера вроде никак.
можешь к тегу body приписать overflow-y:hidden; тогда полоса прокрутки появляться не будет, а к нужному блоку цепляешь плагин, по типу www.xiper.net/collect/js-plugins/ui/jscrollpane2.html и уже стилизуешь как тебе надо.
По крайней мере я делал так, может ещё варианты есть интереснее)

ну как вариант просто присвоить этим li какой нибудь класс, например no-active и тогда

ul.navigation .no-active a:hover {
    border-bottom:none;
    color:white;
  }

$(".active").replaceWith("<span>имя ссылки</span>")

как такое может быть чтобы и то, и другое одновременно? он может выравниваться или по правой стороне text-align:right;
или по ширине text-align:justify;
а если ты хочешь чтобы текст находился в правом углу, то запихивай его в div с фиксированной шириной, блок этот float:right; и выравнивай text-align:right;

на https://jsfiddle.net/ выложи вместе с вёрсткой

Считаю, что книги, следует читать когда ты уже что то знаешь. Лучше смотри видеоуроки на ютубе, быстрее освоишь.
А отрабатывать практику по книге полное извращение.

https://jqueryui.com/datepicker/

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

проще: всего запилить качественной картинкой jpg.
сложнее: сделать блоки с текстом и абсолютно их позиционаровать
сложно и нудно: текстовые блоки абсолютно позиционировать и линии эти цеплять к блокам псевдоэлементами

И заворачивайте всё, что в теге body, во .wrapper. В будущем поможет избежать многих проблем