Милок Мурлыка

Вот скрин по первому блоку - https://yadi.sk/i/jjQWczVWrWYE9
По второму делать не стал, такое ощущение что line-height между двумя этими блоками перепутано. Если поменять местами, то на глаз всё нормально. Скорее всего ваша проблема в неправильных значениях line-height

codepen.io/anon/pen/RaEoEP

С кнопкой наверное не получиться, а вот span'ом или текстом легко! Оберни текст/спан <label for="pic01"></label>. Span если что можно стилизовать как кнопку..

Сам этой проблемой только что страдал, оказалось отсутствует тег meta viewport и браузер автоматически масштабирует сайт

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

Чек-лист вёрстки - https://habrahabr.ru/post/114256/

Это должно помочь:

.rightside {
  float: left;
  width: 60%;
}

UPD: Еще нужно удалить это
margin-left: 40%;
там же.

Я не совсем понимаю что нельзя центрировать? С помощью text-align: center можно центрировать inline и inline-block, возможно в учебниках говориться например о блочных элементах. Приведите пример статьи или учебника по сабжу