Help with Problem

Hi. I'm going a bit loopy. Probably beeen looking at code too long but just cant see what the problem is. My drop down menue for mobile users/small screens displays and nearly works, its just the links in it dont seem to register.
I tried relative and full urls and other tests but ive drawn a bit of a blank
its the bit im concerned with

<div id="header">
  <div class="container"> 
    <!-- Header | Logo, Menu
		================================================== -->

Hi
I'm working on a gallery/shop of artwork. I did a test page, just lightbox code i found. but when I put it in my actual web page it opens the image but none of the next, back, close links.
Anyone know if theres an obvious reason why this would not work.
i'm guessing its some sort of code clash but im not too hot with this stuff

Thanks

I am a first year student in comp sci so I have the very basics of html and css down, but someone has asked me to make a site for them so I tried. The problem I am having with the layout which goes absolutely haywire when I zoom in/out or inspect the site on the mobile devices in chrome. And also I find that white space in the site looks off and I am not sure what to do there.

I am not very good at CSS yet. I am trying to change a web page to suit our needs. The guy who created it started with someone else's template which is at;
https://html5up.net/twenty

There are parts of the page I am not fond of. He has buttons to go to outside pages, we need about six. They have large graphics and only two across. I want smaller graphics and four across. I put a sample of the HTML below.

I need to fix two elements on a page.
The first element is an .svg image, this one need to be in the middle of the page, always!
The second element is a text line, this one need to be in the bottom/center of the page, always!

The page is ready, but the second element is in the wrong position, it is at the top of the page, but I want it at the bottom.

That's what I've done...

Download link
https://we.tl/yXVBUBObWM