Why doesn't smooth scrolling work in a jQuery menu and how to hide the menu after a click?

Question

css

Faced a number of problems with the layout of the adaptive menu. I can't figure out what's wrong. Help plz. I made a smooth scrolling in the menu and opening a burger on mobile using jQuery. Faced with the following nuances:
1) Smooth scrolling does not work on the site when you click on a menu item. Filled in the sandbox - everything works there. The inspector doesn't throw any errors. What can be wrong?
2) Burger icon (appears at screen resolution 768px or less) started jumping after adding jQuery. That is, in the closed state, it went 10% to the side. I click to open the menu and the icon jumps to the right place. How to fix and what could be the matter?
3) On mobile, when expanding, the menu itself is not centered horizontally (this appeared after adding the jQuery code). In styles, text-align: center is written for links.
4) How to close the mobile menu after a click? That is, now you click in the section and the menu remains open. I want to hide it.
Here is the site .
Here is the sandbox .
Please help me figure this out.