In post #19 I have included a screenshot that shows one of your photos, your hamburge and some of Developer Tools. A direct link to the screenshot I am referring to is here.
I don’t like hamburgers so I am not familiar with the checkbox hack technique that you are trying to use. I will leave it to someone else to try to sort out why your hamburger is not working. My personal view is that it is better not to hide your main navigation bar if you want site visitors to explore your website. I therefore allow navigation bar buttons to wrap onto a second row on smartphones. I demonstrate that here:
(In that CodePen I have reduced the shadow around the photos).
Again a personal view is that it is not necessary to have navigation bar buttons within a <li> list element, so I have deleted the list. That may be contentious around these parts 
. Anyway it made the CSS simpler.
If you use percentage values for padding the width or height of the padding will be a percentage of the width of the containing element. The same applies to margins. In the above CodePen I have used some percentage values so the navigation buttons squeeze closer together on small screens.
If you use image editing software to make your photos have the same aspect ratio you will not have the present mixture of aspect ratios.
