адаптивный сайт
Идея может и не плохая (сама задумка, я имею в виду).
Но принцип работы и подход, "двойка... выйди вон..." (шутка)
Теперь конструктивная критика.
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% (во всяком случае от определённых размеров сужения.)