Upon observation, I have encountered an issue where I am unable to click on the a tags to navigate to another page. It seems like the :hover function is also not working in this scenario. I am relatively new to HTML CSS and despite spending hours trying to troubleshoot, I am struggling to identify the problem. I suspect it might involve clear:both or something related to positioning, but I can't seem to pinpoint the exact cause. I have attempted to comment out nearly everything without success. Any help from you experts would be greatly appreciated. Apologies if this is considered a beginner question.
html{
height:100%;
}
...
<div class="container">
<div class="left-side">
<img src="/IMAGES/insys-icom-logo.webp" alt="logo">
<h1 id="Slogan">Your <span class="expert">digitalisation expert</span> for industrial data communication</h1>
<p>With our core competencies of <span id="områden">remote maintenance, remote control, status monitoring and data networking,</span> we form the secure bridge between IT and OT.</p>
<button id="toppsäljare">Best sellers</button>
</div>
<div class="right-side">
<div class="container-nav">
<nav>
<ul>
<li><a href="#"></a>SHOP</li>
<li><a href="/HTML/contactpage.html"></a>CONTACT US</li>
<li><a href="#"></a>ABOUT US</li>
<li><a href="#"></a>FIND US</li>
</ul>
</nav>
</div>
<video id="turbin" src="/IMAGES/turbin wide.mp4" alt="turbinevideo" autoplay loop muted>
</div>
</div>