Идея может и не плохая (сама задумка, я имею в виду).

Но принцип работы и подход, "двойка... выйди вон..." (шутка)

Теперь конструктивная критика.

1) если Вы хотите щирину колонки сделать с фиксированными размерами,

то и надо ширину задавать в жёстких единицах.

.nav {
width: 12em; /* ну или в пикселях, вместо width: 20%;*/

...

2) если оставить всё как есть, и выставить постоянную ширину левой

колонки, то при сжимании до мобильной версии, только эта колонка и останется.

Для основного содержания и места не останется.

3) учтя пункт 2, есть смысл сначала сделать набросок для мобильной версии,

а потом смотреть, с какой ширины есть смысл перестранивать дизайн в две колонки.

Или, если же этот сайт должен только в десктопном виде быть, то нужно установить рамки,

с которых при дальнейшем сужении появлялись бы полосы прокручивания.

при сжатии правая сторона лезет под левую , что я не так сделал ??

Вообще, при перерасчёте в проценты, нужно учитывать,

что все бровзеры по разному реагируют на border, margin и padding.

А чтоб всё сделать более-менее одинаково (одинаковые исходные параметры),

используют Normalize.css: https://necolas.github.io/normalize.css/

Ну и при перерасчёте в проценты ширин, нужно собственные border, margin и padding тоже брать во внимание.

20% и 79% не всегда достаточно, чтоб всё перекрыть.

Возможно border, margin и padding перебирают отпущенный им 1% (во всяком случае от определённых размеров сужения.)