DTX

Либо
display: table;
Либо flex с
justify-content: space-between;

Upd:
С table немного не то получается..
codepen.io/anon/pen/GqPVQR

Ну так добавьте margin-top main'у, и всё будет ок

Upd:
codepen.io/anon/pen/xOgyLm

codepen.io/anon/pen/PzGLBX

Там не canvas, а обычный css
transform: rotateX(90*n deg)

Всё увеличивается. Просто active - это когда кнопка нажата.
Добавил hover для наглядности:
https://jsfiddle.net/an68mhtm/3/

P.s. Лол, че вопросы то дублируешь/не закрываешь?
Как убрать глюк в IE и Edge?
Как в селекторе класса применить стиль только для селектора?

Так это обычный padding для input'а.

>Можно ли в cookie добавить стили?
Можно, почему нет. Точнее добавить туда признак того, что кнопка была нажата. И в зависимости от него вешать стили.

>Либо, лучше через сессию?
Так сессия и использует куки для хранения всех параметров.

1) В хроме такой же баг
https://jsfiddle.net/tr3e2rd5/8/

2)

Получается, что transition:all влияет на margin-left: -15px; в navbar-brand, но ПОЧЕМУ, если я указываю transition для селектора a????

Так у тебя у А есть класс .navbar-brand :)
<a class="navbar-brand" href="#">Logo</a>

Да вроде применима.
codepen.io/anon/pen/dXGRqB
Только вот как вы будете вкладывать элементы в элемент, который может быть :focus?
Я про строчку
&:focus > img

*первый раз почему-то ссылка не прикрепилась