Is off canvas navigation implemented correctly?

Question

css

I wanted to try to make a menu using flexbox that will be pushed / hidden by pressing a button.
I tried, but it didn't quite work. I knew how to layout without flexbox, I just made the menu fixed, in the height of the viewport, indicated the width and negative margin. And the content of the block indicated padding-left equal to the width of the menu + the necessary padding. Then I made a button on the right (I don’t know how to make the button move along with the menu when opened) In general, I tried to make it up like this before and something worked out. But it is clear that everything is through one place.
Now I started to get used to flexbox and try to type something. I made a flex container, put the menu and content part in it. It turned out 2 columns. Then I googled that with position absolute the column goes down, and everything else stretches with flex-grow 1. In general, then I added transform translate to the content part. And when you click, you remove it then add an offset.
In general, somehow, yes, something happened. Seems to be working fine.
[Questions] But is it correct? or is there a better way to do it?
Please look at the code, maybe something is wrong, comment on the errors ... all of them want to learn prof. typeset and use best practices.
Here is a link to the demo - codepen.io/evg_/pen/xOdKbp?editors=1100

Answer 1

Codepen.io has a code analysis with hints.
In principle, all warnings are not significant, about the order of styles not in alphabetical order and prefixes.